Sass 回顾
中文官网：https://www.sass.hk/
#、什么是 Sass
Sass 是一种 CSS 的预编译语言，它扩展了 CSS 语言，增加了 变量（variables）、嵌套（nested rules）、混合（mixins）、函数（functions）、运算等特性，并完全兼容 CSS 语法，使 CSS 更易维护。它能够帮助复杂的样式表更有条理，并且易于在项目内部或跨项目共享设计。
#、Sass 优势
它是一种预处理语言，提供了 CSS 语法
它是 CSS 的超集，包含了 CSS 的所有功能
它是更稳定，功能更强大的 CSS 扩展和样式文档，结构更清晰，它可以帮助你以更少的代码编写 CSS
它促进了可重用性方法，逻辑语句以及一些内置功能，例如颜色处理，数学和参数列表项
它具有用于库的高级控制指令
它提供格式良好，可自定义的输出
#、sass 脚本支持哪些数据类型？
布尔值、数（像素）、空值、颜色、文本字符串、用逗号或空格分隔的值列表（2.0em，Verdana，Arial）、从一个值映射到另一个值（键1：值1，键2：值2）
sass 始终支持所有其他类型的 CSS 属性值
#、scss 和 sass 之间的区别
sass 就像 CSS 预处理器。它具有 CSS3 的扩展名。 Sass 源自另一个称为 Haml 的预处理器
sass 包含2种语法：
SCSS 是第一种语法，它使用 .scss 扩展名
缩进语法或 Sass 是另一种语法，它使用 .sass 扩展名
你只需将扩展名从 .css 更改为 .scss，即可将有效的 CSS 文档隐藏到 Sass 中。它与 CSS 完全兼容。
Scss 提供 CSS 友好的语法来缩小 Sass 与 CSS 之间的差距。Scss 称为 Sassy CSS
#、变量
Sass 让人们受益的一个重要特性就是它为 CSS 引入了变量。把可以反复使用的 CSS 属性值定义成了变量，然后通过变量名来引用他们，而无需重复书写这一属性值。或者对于仅使用过一次的属性值，可以赋予其一个易懂的变量名，让人一眼就知道这个属性值的用途。
Sass 使用 $ 符号来标识变量：
这里要注意 {} 括起来的规则块
#、嵌套规则
Sass 可以让你像俄罗斯套娃那样在规则块中嵌套规则块。它在输出 CSS 时会帮你把这些嵌套规则处理好，避免你的重复书写。嵌套规则的优势在于只避免重复书写样式，且使样式可读性更高。
这里还有一个特殊结构符：&，用来标识嵌套规则中的父选择器
群体选择器的嵌套：
处理这种群组选择器规则嵌套上的强大能力，正式 Sass 减少重复敲写方面的贡献之一。尤其是嵌套级别达到两层甚至三层以上时，与普通的 CSS 编写方式相比，只写一遍群组选择器大大减少了工作量。
嵌套属性：
#、导入 Sass 文件
CSS 有一个特别不常用的特性，即 @import 规则，它允许在一个 CSS 文件中导入其他 CSS 文件。然而，后果是只有执行到 @import 时，浏览器才会去下载其他 CSS 文件，这导致页面加载起来特别慢。
Sass 也有一个 @import 规则，但不同的是，Sass 的 @import 规则在生成 CSS 文件时，就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个 CSS 文件中，而无需发起额外的下载请求。另外，所有在被导入文件中定义的变量和混合器，均可在导入文件中使用。
使用 Sass 部分文件。当通过 @import 把 Sass 样式分散到多个文件时，通常指向生成少数几个 CSS 文件。那些专门为 @import 命令而编写的 Sass 文件，并不需要生成对应的独立的 CSS 文件，这样的 Sass 文件称为局部文件，对称，Sass 有一个特殊的约定来命名这些文件，即：文件名以下划线开头。这样，Sass 就不会在编译时单独编译这个文件输出 CSS，而只把这个文件用作导入。当 @import 一个局部文件时，还可以不写文件的全名，即圣罗文件名开头的下划线。局部文件可以被多个不同的文件引用，当一些样式需要在多个页面甚至多个项目中使用时，这非常有用。
#、静默注释
Sass 中提供了另一种不同于 CSS 标准注释格式 /*...*/ 的注释语法，即静默注释，其内容不会出现在生成的 CSS 文件中。它以 // 开头，注释内容直到行末。
当注释出现在原生 CSS 不允许的地方，Sass 将不知道如何将其生成到对应 CSS 文件中的响应位置，于是这些注释被抹掉：
#、混合器
当样式变得越来越复杂，需要大段大段的重用样式代码，这时使用混合器来实现大段样式的重用。
使用 @mixin 标识符定义。使用这个标识符给一大段样式赋予一个名字，这样就可以轻易的通过引用这个名字重用这段样式。
混合器不一定总得生成相同样式。可以通过在 @include 混合器时给混合器传参，来指定混合器生成的精确样式。
这种方式跟 JS 的 function 很像：
#、选择器继承
使用 Sass 的时候，最后一个减少重复的主要特性就是选择器继承。基于 Nicole Sullivan 面向对象的 CSS 理念，选择器继承是说一个选择器可以继承另一个选择器定义的所有样式。这个通过 @extend 语法实现。
#、Sass 占位符选择器
占位符选择器是以 % 作为开始符的选择器。它自身不会出现在编译后的 CSS 文件中，只会出现在 @extend 了它的那些选择器中。
详见：
#、Sass 的运算符
赋值运算符：在 Sass 中，冒号（：）元素安抚用于定义变量
算术运算符：用于执行算术运算的一些标准数学运算符。
字符串运算符：加法还可用于连接字符串
平等算子：条件语句中使用等号运算符。这些运算符用于测试两个值是否相同，并返回布尔值
比较运算符：类似于相等运算符，但它们仅用于比较数字
逻辑运算符：用于测试条件表达式中的多个条件
颜色运算符：Sass 允许使用颜色分量和算术运算，任何颜色表达式都返回 SassScript 颜色值
列表运算符：使用逗号或空格分隔的一系列值。见：https://www.runoob.com/sass/sass-list-func.html
#、插值？
它使用 #{} 语法提供选择器和属性名称中的 SassScript 变量。可以在花括号中指定变量或属性名称
#、指令
@debug 指令用于检测错误，并向标准错误输出流显示 Sass 脚本表达式值
@extend 指令用于将一组 CSS 属性从一个选择器共享到 另一个 选择器。这是 Sass 非常重要和有用的功能。
它允许彼此共享一组属性。它是你的代码更少，并方便你重复重写
@media 指令用于将样式规则设置为不同的媒体类型。它支持扩展 @media 规则。该指令可以嵌套在选择器 Sass 中，但是主要影响显示在样式表的顶层
@at-root 伪指令是嵌套规则的集合，这些规则用于在文档根目录处设置样式
#、Sass 系统要求：