如何覆盖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文件覆盖？

编辑1：找到解决方案。

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

由于未加载实现CSS的颜色mixin文件，因此无法正常工作。

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

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

现在工作。

Answer 1

见下面的例子

 $secondary-color: color("blue", "darken-1");
 .someClass{
      $secondary-color: color("teal", "darken-1") !important;
      .someClass h2{
            color: $secondary-color;
      }
 }

Answer 2

首先（而不是最后）导入您的var：

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

据我了解，SCSS !default标志：这是一个后备，以前没有声明过任何东西。 因此，当您首先导入变量（仅导入变量，不导入可能具有依赖关系的其他修改）时，它将起作用。