从一个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 实现吗?..或者用gulp(真的不喜欢).
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 之前运行的纯 ruby(或您喜欢的任何其他语言)的简单预处理器怎么样?
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.
我认为纯 sass 解决方案在 atm 中是不可能的.
I think a pure sass solution is not possible atm.
这篇关于从一个sass文件到多个css文件的SASS输出的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!