Question

我正在开发一个Rails项目，其中包含一些用sass编写的样式表。布局如下：

我们有一个清单（application.sass）需要一些其他的sass文件：

// in application.sass:
/*
 *= require reset
 *= require base
 *= require forms
 ...
 */

这些其他样式表都包含一些带有一些颜色定义的“部分”，并广泛使用这些：

// in _colors.sass:
$foreground: '#F00'
$background: '#0F0'
// ...


// in base.sass:
@import colors.sass
#content
  background-color: $background
// ...


// in forms.sass:
@import colors.sass
form
  color: $foreground
// ...

我现在想生成一个包含相同规则的结果样式表的副本，只包含换出的颜色定义（例如，red_application.sass是application.sass的精确克隆，仅包含_var中的所有颜色定义.sass换掉了。）

我尝试将颜色定义导入清单文件，如下所示：

// in application.sass:
/*
 *= require _colors.sass
 *= require reset
 *= require base
 *= require forms
 ...
 */

// in red_application.sass:
/*
 *= require _red_colors.sass
 *= require reset
 *= require base
 *= require forms
 ...
 */

// in base.sass:
// no @import
#content
  background-color: $background
// ...


// in forms.sass:
// no @import
form
  color: $foreground
// ...

不幸的是，这不起作用，因为没有@import语句就无法生成单个样式表（base.sass，forms.sass），因为他们不知道其中使用的变量。

我如何重组我们的样式表以实现我的目标？

Answer 1

请勿使用scss导入混合链轮。

要使sprocket工作，每个必需的文件必须是一个完整的css（编译后），结果文件将包含所有css文件的内容。

scss导入在编译阶段解决，因此您无法按预期执行。

你可以做的是导入每个主scss中的颜色，不要让链轮需要东西：

application.sass中的

：

@import _colors
@import reset
@import base
@import forms

red_application.sass中的

：

@import _red_colors
@import reset
@import base
@import forms

sass / sprockets：生成2个样式表，这些样式表仅在少数几个值上有所不同

1 个答案: