Sass（Scss）变量用法

来源：互联网 2023-03-16 19:14:18 127

Sass / Scss 的变量

引入变量，把反复使用css属性值定义成变量，然后通过变量名引用，就不用重复书写相同属性值。

Sass（Scss）变量用法

工具/原料

html导入Sass / Scss 文件

和导入css文件一样，但是需要先把sass / scss文件先编译成css文件。HBuilder可以自动编译，当创建完sass / scss文件保存后就会自动生成css文件

，再在HTML中导入该css文件即可。

Sass（Scss）变量用法

Sass变量：（$符号标识变量）

$变量名：变量值 ;

（1.$变量名 : 变量值 ; $变量名 : 变量值 ;）

（2.$变量名 : ' 变量值 ' , ' 变量值 ' , ' 变量名 ' ;）

Sass（Scss）变量用法

补充一个例子（比上一个复杂一点的）：

$fontcolor : #f00 ;

$border : 1px solid $fontcolor ;

div { border : $border ; }

Sass（Scss）变量用法

再给变量名命名的时候有的人会习惯加中划线或者下划线

（$border-color / $border_color）

中划线和下划线命名使用相同，可以通用，也就是说当你命名变量名时用了中划线，再使用该变量时用了下划线，也是识别的，反之一样。

Sass（Scss）变量用法

如果出现两个变量名相同的情况下，会识别最后一个，前面的会被后面的覆盖。

Sass（Scss）变量用法

5相关内容未经许可获取自百度经验

！default 表示默认值，用于变量（前面的就不会被后面的覆盖了）

（举个简单的例子，就能理解了）

Sass（Scss）变量用法

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

上一篇：学习html制作网页：[5]入门基础下一篇：Sass（Scss）乘除法等其他运算