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）