注释
- CSS 中的注释
/* */在 Sass 中依旧可用，编译为 CSS 依然保留 - Sass 也支持
//单行注释，编译为 CSS 会被删除
如果是压缩输出模式，所有注释都会被删除。可以在多行注释的第一个字符书写一个 !，此时即便是在压缩模式，这条注释也会被保留，通常用于添加版权信息：
/*!
该注释即使是在压缩模式，也会被保留，通常用于添加版权信息
*/
.test {
width: 300px;
}变量
这是当初 Sass 推出时一个极大的亮点，支持变量的声明，声明方式很简单，通过 $ 开头来进行声明，赋值方法和 CSS 属性的写法是一致的：
// 声明变量
$width: 1600px;
$pen-size: 3em;
div {
width: $width;
font-size: $pen-size;
}变量声明支持块级作用域，如果是在一个嵌套规则内部定义的变量，就只能在嵌套规则内部使用（局部变量），如果不是在嵌套规则内定义的变量那就是全局变量：
// 全局变量
$width: 1600px;
div {
// 局部变量
$width: 800px;
$color: red;
p.one {
// 变量查找：就近原则
width: $width; /* 800px */
color: $color; /* red */
}
}
p.two {
width: $width; /* 1600px */
color: $color; /* 报错，因为 $color 是一个局部变量 */
}可以通过 !global 将一个局部变量转换为全局变量：
div {
// 局部变量转换为全局变量
$color: red !global;
}数据类型
CSS 预处理器就是将编程语言的特性融入到 CSS 中，自然会有数据类型。
在 Sass 中支持 7 种数据类型：
- 数值类型
- 字符串类型
- 布尔类型
- 空值
- 数组（list）
- 字典（map）
- 颜色类型
数值类型
可以带单位，数字可以是正数、负数、浮点数，如 1、2、13、10px
字符串类型
可以使用单引号、双引号或不使用引号，如 "foo"、'bar'、baz
布尔类型
该类型就两个值：true 和 false，可以进行逻辑运算，支持 and、or、not 来做逻辑运算
$a: 1>0 and 0>5; // false
$b: "a" == a; // true
$c: false; // false
$d: not $c; // true空值类型
就一个值：null，表示空，不能和其他类型进行算术运算
数组类型
可以通过空格来间隔，也可以通过逗号来间隔。
数组里可以包含子数组，如 1px 2px, 5px 6px 就是包含了两个数组，1px 2px 是一个数组，5px 6px 又是一个数组。如果内外数组的分隔方式相同，可以使用小括号来分隔，如 (1px 2px) (5px 6px)
添加了小括号的内容被编译为 CSS 时，会被去掉小括号，如 (1px 2px) (5px 6px) -> 1px 2px 5px 6px：
$list0: 1px 2px 5px 6px;
$list1: 1px 2px, 5px 6px;
$list2: (1px 2px) (5px 6px);
div {
padding: $list2; // 1px 2px 5px 6px
}小括号如果为空，则表示是一个空数组，空数组不可以直接编译为 CSS：
$list3: ();
div {
padding: $list3; // 报错
}数组里包含空数组或 null，编译能够成功，空数组和 null 会被去除：
$list4: 1px 2px null 3px;
$list5: 1px 2px () 3px;
div {
padding: $list4; // 1px 2px 3px
}
.div2 {
padding: $list5; // 1px 2px 3px
}可以使用 nth 函数去访问数组里面的值，注意数组的下标是从 1 开始的：
$font-sizes: 12px 14px 16px 18px 24px;
// 通过索引访问 List 中的值
$base-font-size: nth($font-sizes, 3); // 16px数组可以用在循环中：
$sizes: 40px 50px 60px;
@each $s in $sizes {
.icon-#{$s} {
font-size: $s;
width: $s;
height: $s;
}
}字典类型
必须用小括号扩起来，小括号里面是一对一对的键值对，键值对用 , 分割：
$a: (
$key1: value1,
$key2: value2
)可以通过 map-get 函数获取字典值：
$colors: (
"primary": #4caf50,
"secondary": #ff9800,
"accent": #2196f3,
);
$primary: map-get($colors, "primary"); // #4caf50字典也可以用在循环中：
$icons: (
"eye": "\f112",
"start": "\f12e",
"stop": "\f12f",
);
@each $k, $v in $icons {
.icon-#{$k}:before {
display: inline-block;
font-family: "Open Sans";
content: $v;
}
}颜色类型
支持原生 CSS 中各种颜色的表示方式：十六进制、RGB、RGBA、HSL、HSLA、颜色英语单词。
Sass 还提供了内置的 Colors 相关函数，可以方便对颜色进行调整和操作。
调整亮度
lighten：增加亮度darken：减少亮度
$color: red;
.div1 {
// 亮度增加 10%
background-color: lighten($color, 10%); // #ff3333
}
.div2 {
// 亮度减少 10%
background-color: darken($color, 10%); // #cc0000
}调整饱和度
saturate：增加饱和度desaturate：减少饱和度
$color: #4caf50;
.div1 {
background-color: saturate($color, 10%); // 饱和度增加 10%
}
.div2 {
background-color: desaturate($color, 10%); // 饱和度减少 10%
}调整色相
adjust-hue：调整色相
$color: #4caf50;
$new-hue: adjust-hue($color, 30); // 色相增加 30 度添加透明度
rgba：为颜色添加透明度
$color: #4caf50;
$transparent: rgba($color, 0.5); // 添加 50% 透明度混合颜色
mix：混合两种颜色
$color1: #4caf50;
$color2: #2196f3;
$mixed: mix($color1, $color2, 50%); // 混合两种颜色，权重 50%