将变量文件与SASS中的模板相结合

Question

我想将一个具有特定样式变量的文件与一个使用变量的通用模板结合起来，所以我只需要在模板中定义一次css，但最终会有不同样式的css文件。

示例：

假设我有两个带有颜色变量的colors.scss文件。

colors1.scss：

$background: blue;
$foreground: white;

colors2.scss：

$background: lightgreen;
$foreground: black;

和一个带有css的模板文件：

body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: $foreground;
background-color: $background;
}

那么，我需要如何编写我的style1.scss和style2.scss，以将变量与模板相结合，从而生成以下css文件。

style1.css：

body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: blue;
background-color: white;
}

style2.css：

body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: lightgreen;
background-color: black;
}

我知道我可以为style1.scs:做1-1

@import 'colors1.scss';
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: $foreground;
background-color: $background;
}

但是我真的不想重复模板文件的内容。

有什么想法吗？

Answer 1

很明显，这比我想象的要容易。

您只需要导入变量和模板文件，它们就会自动组合。

所以基本上我的文件如下：

style1.scs:

@import 'colors1.scss';
@import 'template.scss';

style2.scs:

@import 'colors2.scss';
@import 'template.scss';

这就是它的全部。