六、SassScript属性使用变量、算数运算

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;
}