sass从一个SASS文件到多个CSS文件

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

Scheme-Medreser.css：

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

这有可能使用纯净的Sass？ ..或吞噬（真的不喜欢）。 在我的情况下，提取SASS的常见部分并创建3个不同的SASS文件并不是解决方案。我有9个方案乘以数十个复杂组件。班级包装器附加方案也不是解决方案。

在将资产编译到CSS之前运行的简单预处理器（或用您喜欢的任何其他语言）如何？

Answer 1

：

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

文件。您将拥有可以编译的文件。

我认为无法使用纯净的解决方案。

我认为只有Sass不可能。除非您将SCSS文件拆分，否则您需要使用诸如Gulp.

之类的东西。

使用Gulp，您可以将SCSS文件（也许是使用Regex）拆分，并分别编译，也可以将编译的CSS文件分开（可能要慢得多）。除非您提供SCSS的示例，否则我无法提供示例代码。