Question

我的最终目标是创建一个模板文件，我可以为不同的页面修改。我的方法是创建template.scss和modifier.scss

在template.scss中设置了

$background: green; 
background: $background

在modifier.scss中设置了

@import 'template';
$background: red;

并期望背景改变，但没有任何反应显然这是错误的方法，我应该怎么做？

Answer 1

这是正确的，因为这种方法不起作用。想想如何解释这些文件。

示例

template.scss

$background: green; background: $background

modifier.scss

@import 'template'; $background: red;

在这种情况下，你基本上是这样做的：

$background: green; background: $background $background: red;

最终效果background设置为green，$background变量最终重新定义为red。

您需要在background: $background内再次定义modifier.scss，以便让您当前的设置正常工作。

不同的方法

一种方法是在一个文件中定义基本样式，在另一个文件中定义修改器样式，然后在最终文件中设置CSS属性。像这样：

template.scss

$background: green;

modifier.scss

$background: red;

styles.scss

background: $background;

Answer 2

使用这种方式

variables-template.css （仅包含变量）

$background: green;

variables-modifier.css （仅包含变量）

$background: red;

styles-template.css （包含您的样式）

body { background-color: $background; }

main.css （包含您的输入逻辑）

@import 'variables-template.css';
@import 'variables-modifier.css';
@import 'styles-template.css';

奖励：使用草莓框架

已经为这种情况创造了草莓！

请参阅StrawberrySass。

Answer 3

您可以在!default中将该变量设为 template.scss ，然后在modifier.scss中以不同的顺序导入后一个文件。

Variable Defaults: !default （Sass参考）

在template.scss

$background: green !default; 
background: $background;

然后在modifier.scss

$background: red;
@import 'template';

绿色不应该分配给变量，如果它已经设置为红色，modifier.scss就是这种情况（编辑：s /不会/不应该我还没有测试它谐音）

从其他文件更改SCSS变量

3 个答案:

使用这种方式

奖励：使用草莓框架