5、SASS - SassScript (扩展的类似脚本语言的功能)
1、变量 $
SassScript 最普遍的用法就是变量,变量以美元符号开头,赋值方法与css属性的写法一样:
$width: 200px;
直接使用即可调用变量
#main { width: $width; }
变量支持块级作用域,在嵌套括号内定义的变量只能在嵌套内及下层使用(局部变量)
不在嵌套规则内定义的变量则可在任何地方使用(全局变量)。
将局部变量转换为全局变量可以添加 !global 声明:
#main { $width: 200px !global; width:$width; }
编译为:
#main { width: 200px; } #sidebar { width: 200px; }
2、数据类型(Data Types)
SassScript 支持6种主要的数据类型:
- 数字:1,2,12,10px
- 字符串:有引号字符串 与 无引号字符串 "foo", 'bar', baz
- 颜色:blue, #04a3f9, rgba(0,0,0,0.8)
- 布尔型:true,false
- 数组(list),用空格或逗号作分隔符, 1.5em 1em 0 2em, Helvetica,Arial,Sans-serif
- maps:相当于JavaScript中的Object, (key:value1, key2:value2)