使用 CSS 预处理器 SASS
1. CSS 的一些不那么美好的地方
- CSS 不是一种编程语言，对于开发人员不是很友好。
- CSS 在开发中会有许多重复劳动，效率低。
- 当 UI 达一定规模后，CSS 很容易冗余，并且难以维护。
2. SASS 是神马
SASS (Syntactically Awesome StyleSheets) 是一种 CSS 预处理器，可以用它来定义一套新的语法规则和函数，以加强和提升CSS。通过这种新的编程语言，可以高效率地使用少量的代码创建复杂的设计。它改进并增强了CSS的能力，增加了变量，局部和函数这些特性。
3. why SASS
- 兼容各版本 CSS 语法。
- 功能丰富
- 稳定成熟
- 久经考验
- 广泛的社区
- 前端框架的基石（compass 以及 bootstrap 4）
4. SASS 基础入门 （可参考SASS 中文网）
4.1 SASS 文件后缀名
sass 有两种后缀名，一种是sass，另一种是scss。使用scss后缀名，更符合我们平时书写css的习惯，即使用大括号和分号。
4.2 使用变量
sass最让人受益的一个重要特性就是引入了变量。sass使用$符号来标识变量。
4.2.1变量声明
sass变量的声明和css属性的声明很像。可以在css规则块外面或规则块里面进行声明（在规则块里面声明时，该变量只在该规则块里有效）。
sass
css //编译后
4.2.2 变量引用
css属性标准值存在的地方，便可引用变量。css生成的时候，变量会被它们的值取代。
sass
css //编译后
4.2.3 变量使用中划线还是下划线分隔
随意咯！
4.3 嵌套 CSS 规则
css重复写选择器是很烦人的，sass的嵌套规则允许你写一遍并且可读性更好，避免重复书写。
css 与 sass 对比
css //编译后
4.3.1 父选择器标识符 &
在为父级选择器添加:hover等伪类时，这种方法特别好用。
sass
css //编译后
还有另外一种用法，你可以在父选择器前面添加选择器。
sass
css //编译后
4.3.2 群组选择器的嵌套
sass
css //编译后
4.3.3 子组合选择器和同层组合选择器：>、+和~
和其他选择器配合使用，以指定浏览器仅选择某种特定上下文中的元素。
4.3.4 嵌套属性
在sass中，不仅可以嵌套选择器，还可以嵌套属性。
sass
css //编译后
4.4 导入 SASS
sass也有一个@import规则，但不同的是，sass 的@import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求。另外，所有在被导入文件中定义的变量和混合器均可在导入文件中使用。
使用sass的@import规则并不需要指明被导入文件的全名。你可以省略.sass或.scss文件后缀。
4.4.1 使用局部 sass 文件
sass局部文件的文件名以下划线开头。这样，sass不会在编译时单独编译这个文件输出css，而只把这个文件用作导入。举个栗子，导入themes/_night-sky.scss这个局部文件里的变量，你只需在样式表中写@import "themes/night-sky"。
4.4.2 默认变量值
一般情况下，反复声明一个变量，只有最后一个会生效并且会覆盖前面的值。在sass中，为防止你写的变量被@import的sass库文件覆盖，可以使用!default值。
$highlight-color: #f90 !default;
.selected {color: $highlight-color;}
4.4.3 嵌套导入
sass的@import可以在css规则块内使用，局部文件被直接插入到导入它的地方。
_blue-theme.scss
sass
css //编译后
4.5 静默注释
sass提供了除了css中标准注释格式/*...*/外另一种注释，即静默注释//，采用//的sass注释不会出现在生成的css中。
4.6 混合器
可以通过sass的混合器实现大段样式的重用。混合器使用@mixin标识符定义，通过@include来使用混合器。
sass
css //编译后
4.6.1 何时使用混合器
如果你发现自己在不停地重复一段样式，那就应该把这段样式构造成优良的混合器，尤其是这段样式本身就是一个逻辑单元，比如说是一组放在一起有意义的属性。
如何判断一组属性是否可以组成混合器，可以看你是否可以为这个混合器想出一个简洁的名字，如rounded-corner等。
4.6.2 混合器中的 CSS 规则
混合器中不仅可以包含属性，也可以包含css规则，包含选择器和选择器中的属性。
@minxin no-bullets {
list-style: none;
li {
list-style-image: none;
list-style-type: none;
margin-left: 0px;
}
}
4.6.3 给混合器传参
可以通过在@include混合器时给混合器传参，来定制混合器生成的精确样式。在@include混合器时，可以把它当作css函数一样来传参。
sass
css //编译后
4.6.4 默认参数值
可以在定义混合器时给参数指定一个默认值。参数默认值使用$name: default-value的声明形式，默认值可以是任何有效的css属性值，甚至是其他参数的引用。
4.7 使用选择器继承来精简CSS
基于Nicole Sullivan 面向对象的css的理念，选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式。这个通过@extend语法实现。（ps: 推荐使用%占位符选择器进行替代。）
4.8 进阶阅读
5 在项目中实践
5.1 安装 gulp-sass
运行如下命令：
npm install gulp-sass --save-dev
5.2 编写 gulpfile.js
5.2.1 加载插件
加载插件
5.2.2 建立任务
编译 sass
压缩 css
5.2.3 事件监听
事件监听
5.3 运行
gulp develop
