如何覆盖scss变量?
我目前正在使用materialize.css,我希望覆盖默认变量,以便主文件保持不变。我在main stylesheet.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(默认框架文件),其中次颜色值为
@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