css - 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-moderate.css:

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

纯 SASS 可以吗？..或者用 gulp(真的不想)。

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

Answer 1

在将 Assets 编译为 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 上是不可能的。