从一个SASS文件到多个css文件的SASS输出

Question

我想从一个sass文件输出多个css文件。我有一个文件：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
  )
);
@each $scheme in $schemes{
  //do something to export to separate file
  @include scheme-base-mixin($scheme);
}

因此结果是3个独立的css文件：

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;
}

中等方案.css：

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

这在纯SASS中可能吗？..或者大口喝（真的不喜欢）。

在我的情况下，提取sass的公共部分并创建3个不同的sass文件不是一个解决方案。我有9个方案乘以几十个复杂组件。通过类包装附加方案也不是解决方案。

Answer 1

在将资产编译为css之前，用纯ruby（或您喜欢的任何其他语言）运行一个简单的预处理器怎么样？

# 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等文件。

我认为一个纯粹的sass解决方案是不可能的atm。

Answer 2

我认为只有sass是不可能的。除非您拆分scss文件，否则您将需要使用类似gump的东西。

使用gulp，您可以拆分scss文件（可能使用regex）并分别编译每个文件，也可以拆分已编译的css文件（可能要慢得多）。除非你提供一个scs的例子，否则我无法提供示例代码。