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-serifmaps：相当于JavaScript中的Object, （key：value1， key2：value2）