从一个SASS文件到多个CSS文件的SASS输出 [英] SASS output from one sass file to multiple css files

问题描述

我想从一个sass文件输出多个css文件. 我有一个文件: schemes.scss ，其代码如下:

I want to output multiple css files from one sass file. I have one file: schemes.scss, with code like this:

$schemes: (
  'light': (
    'body-background': white,
    'headline-color' : #111,
    'subheadline-color': #222
  ),
  'dark': (
    'body-background': black,
    'headline-color' : #ddd,
    'subheadline-color' : #eee
  ),
  'moderate': (
    'body-background': gray,
    'headline-color' : black,
    'subheadline-color' : #333
  )
);

@each $scheme in $schemes{
  //do something to export to separate file
  @include scheme-base-mixin($scheme);
}

以使结果为3个单独的CSS文件:

so that the result are 3 separate css files:

scheme-light.css :

body{
    background-color: white;
}

h1{
    color: #111;
}

.subheadline{
    color: #222;
}

scheme-dark.css :

body{
    background-color: black
}

h1{
    color: #ddd;
}

.subheadline{
    color: #eee;
}

scheme-moderate.css :

body{
    background-color: gray
}
h1{
    color: black;
}
.subheadline{
    color: #333;
}

使用纯SASS可以做到吗? ..或大口吃(真的不喜欢).

Is this possible with pure SASS? ..or with gulp (really prefer not).

提取sass的公共部分并创建3个不同的sass文件在我看来不是解决方案.我有9个方案乘以数十个复杂组件.按类包装的附加方案也不是解决方案.

Extracting common parts of sass and creating 3 different sass files is not a solution in my case. I have 9 schemes multiplied by dozens of complex components. Attaching scheme by class wrapper is not a solution either.

推荐答案

在将资产编译为CSS之前运行的纯红宝石(或您喜欢的任何其他语言)的简单预处理器怎么样?

What about a simple preprocessor in pure ruby (or in any other language you like) which you run before you compile your assets to css?

# gen_schemes_scss.rb    
schemes_scss = File.read('schemes.scss')

%i(light dark moderate).each do |scheme|
  scss = "$scheme: #{scheme};\n" # save current scheme inside scss variable
  scss += schemes_scss # append the rest

  File.write("scheme-#{scheme}.scss", scss) # write to new .scss file
end

使用schemes.scss:

$schemes: (
  'light': (
    'body-background': white,
    'headline-color' : #111,
    'subheadline-color': #222
  ),
  'dark': (
    'body-background': black,
    'headline-color' : #ddd,
    'subheadline-color' : #eee
  ),
  'moderate': (
    'body-background': gray,
    'headline-color' : black,
    'subheadline-color' : #333
  )
);

@include scheme-base-mixin($scheme);

此想法是通过此预处理器生成不同的scss文件.您将拥有可以编译的scheme-light.scss，scheme-dark.scss等文件.

The idea is to generate different scss files by this preprocessor. You will have scheme-light.scss, scheme-dark.scss etc. files which can be compiled.

我认为atm不可能实现纯Sass解决方案.

I think a pure sass solution is not possible atm.

这篇关于从一个SASS文件到多个CSS文件的SASS输出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！