scss-!default默认变量
在变量赋值之前, 利用!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中默认变量值。
一步一个脚印,认真学下去,相信我们都会成为心目中的技术大牛!!!加油!!!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步