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

Posted 2023-02-18

【中文标题】SASS 输出从一个 sass 文件到多个 css 文件

【英文标题】：SASS output from one sass file to multiple css files

【发布时间】：2016-02-15 03:28:34

【问题描述】：

我想从一个 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 的常见部分并创建 3 个不同的 sass 文件不是解决方案。我有 9 个方案乘以几十个复杂的组件。通过类包装器附加方案也不是解决方案。

【问题讨论】：

我也很想知道这个。我目前正在以一种非常低效的方式生成附属样式表，使用颜色变量并为每个附属包含不同的颜色文件。

webdesign.tutsplus.com/tutorials/…

【参考方案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。

【参考方案2】：

我认为仅使用 sass 是不可能的。除非你拆分 scss 文件，否则你需要使用 gulp 之类的东西。

使用 gulp，您可以拆分 scss 文件（可能使用正则表达式）并分别编译每个文件，或者拆分已编译的 css 文件（可能会慢得多）。除非您提供 scss 示例，否则我无法提供示例代码。