1

我正在开发一个 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），因为它们不知道其中使用的变量。

我怎样才能重组我们的样式表来实现我的目标？

4

1 回答 1

2

不要将 sprocket 要求与 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
于 2012-10-31T12:13:51.173 回答