通过引用其他变量覆盖scss变量

时间:2019-03-01 19:23:16

标签: sass bootstrap-4

从技术上讲,这不是助推器,而是scss,但是Bootstrap是我遇到问题的上下文。我正在更改引导程序中某些值的默认值。一个特定的变量,我想引用另一个引导变量。

所以我有自己的文件:

@import "_variable.overrides.scss";
@import "bootstrap.scss";

我的_variable.overrides.scss看起来像这样:

$secondary: lighten($primary, 10%);

我不能这样做,因为$ primary是未定义的,因为我先导入了覆盖的scss。如果我首先导入boostrap.scss,它不会覆盖,因为覆盖必须在默认变量定义之前进行。

有什么办法可以通过引用另一个变量来覆盖一个变量?

1 个答案:

答案 0 :(得分:0)

基本上,这已在herehere之前得到解答。您需要首先 @导入要在自定义SCSS中引用的所有变量。

由于$primary位于_variables.scss中,因此您需要@import _variables.scss_functions.scss(因为_variables.scss对此进行了引用):

@import "bootstrap/functions";
@import "bootstrap/variables";

然后,作为explained in the docs,您的自定义变量将覆盖Bootstrap,因为所有的Bootstrap变量都使用!default标志,这意味着它们不会优先于导入的自定义变量 之前。因此整个SCSS看起来像(您可能需要编辑路径):

@import "bootstrap/functions";
@import "bootstrap/variables";
@import "_variable.overrides.scss";
@import "bootstrap.scss";