6.1. Interactive Shell
Interactive Shell 可以在命令行中测试 SassScript 的功能。在命令行中输入 sass -i,然后输入想要测试的 SassScript 查看输出结果:
$ sass -i
>> "Hello, Sassy World!"
"Hello, Sassy World!"
>> 1px + 1px + 1px
3px
>> #777 + #777
#eeeeee
>> #777 + #888
white
6.2. 变量 $ (Variables: $)
SassScript 最普遍的用法就是变量,变量以美元符号开头,赋值方法与 CSS 属性的写法一样:
$width: 5em;
//直接使用即调用变量:
#main {
width: $width;
}
变量支持块级作用域,嵌套规则内定义的变量只能在嵌套规则内使用(局部变量),不在嵌套规则内定义的变量则可在任何地方使用(全局变量)。将局部变量转换为全局变量可以添加 !global 声明。
6.3. 数据类型 (Data Types)
SassScript 支持 6 种主要的数据类型:
数字:
1, 2, 13, 10px
字符串:有引号字符串与无引号字符串,"foo", 'bar', baz
颜色:blue, #04a3f9, rgba(255,0,0,0.5)
布尔型:true, false
空值:null
数组 (list):用空格或逗号作分隔符,1.5em 1em 0 2em, Helvetica, Arial, sans-serif
maps:相当于 JavaScript 的 object,(key1: value1, key2: value2)
SassScript 也支持其他 CSS 属性值,比如 Unicode 字符集,或 !important 声明。然而Sass 不会特殊对待这些属性值,一律视为无引号字符串。
6.3.1 maps的使用,Maps可视为键值对的集合
//定义map变量:
$colors: ( primary: #FFB01D, secondary: #F2452A, danger: #F53D3D, light: #F4F4F4, dark: #222, border:#F6F6F6);
//使用
#main{
font-color: map-get($colors,'primary');
}
//编译结果:
#main{
font-color: #FFB01D;
}
6.4. 插值语句 #{} (Interpolation: #{})
通过 #{} 插值语句可以在选择器或属性名中使用变量:
$name: foo;
$attr: border;
p.#{$name} {
#{$attr}-color: blue;
}
编译为
p.foo {
border-color: blue;
}