Warning: file_get_contents(/data/phpspider/zhask/data//catemap/8/variables/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
如何覆盖scss变量?_Css_Variables_Sass - Fatal编程技术网

如何覆盖scss变量?

如何覆盖scss变量?,css,variables,sass,Css,Variables,Sass,我目前正在使用materialize.css,我希望覆盖默认变量,以便主文件保持不变。我在main stylesheet.scss中尝试的是 @import '_materialize'; @import '_modified'; @import '_new'; 在我修改过的文件中,我正在设置 $secondary-color: color("blue", "darken-1"); 在materialize.scss中,已经导入了_variable.scss(默认框架文件),其中次颜色值为

我目前正在使用materialize.css,我希望覆盖默认变量,以便主文件保持不变。我在main stylesheet.scss中尝试的是

@import '_materialize';
@import '_modified';
@import '_new';
在我修改过的文件中,我正在设置

$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的颜色混合文件,因此无法工作

@import“物化/组件/颜色”后在modified.scss中,然后

$secondary-color:color("teal", "lighten-5");
现在可以工作了。

请参见下面的示例

 $secondary-color: color("blue", "darken-1");
 .someClass{
      $secondary-color: color("teal", "darken-1") !important;
      .someClass h2{
            color: $secondary-color;
      }
 }
首先(而不是最后)导入变量:


据我所知,SCSS
!default
标志:当以前没有声明任何内容时,它是一个回退。因此,当您首先导入变量(只有变量,没有其他可能具有依赖关系的修改)时,它会起作用。

您是否尝试过
!重要的后面的颜色如下:
$secondary color:color(“蓝色”、“深色-1”)!重要的?这很有趣,我原以为会有用。您是否尝试过将您的
修改的
文件放在第一位?
物化
中的默认
标志意味着只有在尚未设置该值时才会设置该值。另外,一个有趣的事实是,导入文件名时可以省略
\uu
,Sass知道这是一个部分。将“修改”放在“物化”之上会在括号编辑器编译器中出错。应用的
$secondary color
在哪里?是在您更改它的值之前吗?它应用于所有materialize framework scss文件,但如果我将_modified放在顶部,编辑器会给出错误。
@import '_your-vars'; // your own vars
@import '_materialize'; // includes framework vars
... // other modifications