css - 从其他文件更改 SCSS 变量

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最后。

您需要在 modifier.scss 中再次定义 background: $background 才能使当前设置生效。

一种不同的方法

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

template.scss

$background: green; 

modifier.scss

$background: red;

styles.scss

background: $background;