如何覆盖scss变量？答案

【问题标题】：How to override scss variables?如何覆盖scss变量？
【发布时间】：2017-11-25 17:35:14
【问题描述】：

我目前正在使用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;

由于未加载具体化 css 的颜色混合文件而无法正常工作。

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

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

现在可以使用了。

【问题讨论】：

你试过!important;后面这样的颜色：$secondary-color: color("blue", "darken-1") !important;吗？
这很有趣，我原以为会奏效。您是否尝试过将modified 文件放在首位？ materialize 中的 !default 标志意味着只有在尚未设置该值时才会设置该值。另外，一个有趣的事实 - 您可以在导入文件时从文件名中省略 _，Sass 知道它是部分的。
将修改后的 _materialize 放在括号编辑器编译器中会出错
$secondary-color 应用在哪里？是在你改变它的价值之前吗？
它适用于所有物化框架 scss 文件，但如果我将 _modified 放在顶部编辑器上会出错。

标签： css variables sass

【解决方案1】：

看下面的例子

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

【讨论】：

【解决方案2】：

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

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

据我了解 SCSS !default 标志：这是一个后备，当之前没有声明任何内容时。所以当你首先导入你的变量（只有变量，没有其他可能有依赖关系的修改）时，它会起作用。

【讨论】：