在变量赋值之前, 利用!default为变量指定默认值。
也就是说,如果在此之前变量已经赋值,那就不使用默认值,如果没有赋值,则使用默认值。
代码实例如下:
$content: "antzone" !default; #main { content: $content; }
编译为css代码如下:
#main { content: "antzone"; }
由于在声明默认值之前,并没有变量的赋值,所以就使用默认值。
再来看一段代码实例:
$content:"softwhy.com"; $content: "antzone" !default; #main { content: $content; }
编译成css代码如下:
#main { content: "softwhy.com"; }
由于在默认变量值声明之前,就已经有变量赋值了,所以就不再使用默认值。
!default一个重要的作用就是,如果我们引入的他人scss文件中的变量有默认值的设置,那么我们就可以很灵活的来修改这些默认值,只要在这些导入文件之前引入就一个配置scss文件即可,而无需修改他人的scss文件,例如:
@import "config";
@import "variables";
@import "mixins";
只要将重新配置的变量值写入config.scss文件,即可实现修改variables.scss和mixins.scss中默认变量值。