css - 如何覆盖scss变量？

Question

我目前正在使用materialize.css，我想覆盖默认变量，以便主文件保持不变。我在我的主 stylesheet.scss 中尝试的就像

@import '_materialize';
@import '_modified';
@import '_new';

在我的_modified文件中我设置

$secondary-color: color("blue", "darken-1");

在materialize.scss中，_variable.scss已导入(默认框架文件)，其中辅助颜色值为

$secondary-color: color("teal", "lighten-1") !default;

辅助色仍然保持青色。如何使用像这样的外部 scss 文件覆盖？

Edit-1:找到解决方案。

$secondary-color: color("teal", "lighten-1") !default;

由于未加载 Materialize CSS 的颜色混合文件而无法工作。

在modified.scss中的@import "materialize/components/color";之后，然后

$secondary-color:color("teal", "lighten-5");

现在可以工作了。

Answer 1

首先导入您的变量(不是最后):

@import '_your-vars'; // your own vars
@import '_materialize'; // includes framework vars
... // other modifications

据我了解 SCSS !default 标志:这是一个后备，之前没有声明任何内容。因此，当您首先导入变量(仅导入变量，没有可能具有依赖项的其他修改)时，它将起作用。