sass中文文档：
1. sass的安装步骤
|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1. 卸载冲突的Node.js (1) win+R输入control,找到电脑上的卸载软件，找到Node.js，右键"卸载" (2) win+R输入cmd,输入命令:node -v查看结果。 如果提示: 'node' 不是内部或外部命令，也不是可运行的程序,说明【卸载成功】 如果提示版本号，说明没有卸载成功，需要继续卸载 2. 安装插件： (1) 确保自己的电脑是联网状态 (2) 打开HBuilder,点击"工具"->"插件安装"->"安装新插件"->"前往插件市场安装(P)" (3) 在打开的页面中，找到Sass插件，点击"下载" (4) 在打开的页面中，选中"使用HBuilderX导入插件" (5) 此时提示需要登录，如果没有账号，可以先注册一个账号再登录 (6) 登录后，继续选择页面上的"使用HBuilderX导入插件" (7) 提示需要安装HBuilder新版本，点击"继续" (8) 弹窗提示"是否打开HBuilder"选择"打开" (9) HBuilder提示"是否安装sass插件？"点击"是"等待安装成功即可 (10) 可以在"工具"->"插件安装"->"已安装插件"中找到sass，说明安装成功 |
2. sass的简介
|-----------------------------------------------------------------------------------------------------|
| 平时写样式使用的是CSS,sass可以看作是CSS的"预处理器"，是一种专门的CSS编程语言 增加了变量、函数、嵌套、判断、循环等等的用法，让CSS编写更便捷，清晰 |
| sass的语法和版本 .sass是早期sass技术文件的后缀名，3.0版本之前一直使用的是它，文件编辑语法严格 3.0版本之后，后缀名改成了.scss,这种后缀使用的就是CSS语法，学习成本大大降低 |
| .scss文件必须通过编译，生成同名的.css文件，才可以被html使用 |
3. 入门案例
|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 步骤： 1. 在目录下创建scss文件夹 2. 在scss文件夹下创建01.scss文件，代码: body{ background-color:#f00; } 3. 选择"工具"->"外部命令"->"scss/sass编译"->"编译scss/sass" 4. 会在scss文件夹下看到生成了一个同名的01.css文件，里面的内容与scss文件内容一致 |
4. HBuilder中配置sass插件自动编译效果
|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1. 选择"工具"->"外部命令"->"scss/sass编译"->"插件配置" 2. 在打开的package.json文件中，修改第25行和27行的内容 "key": "ctrl+s" 表示通过保存快捷键触发 "onDidSaveExecution": true 表示开启自动编译 3. 保存修改后的配置文件，重启HBuilder即可 4. 可能有的同学重启后自动编译未生效，那么需要再自己手动编译1~2次，就可以自动编译了 |
5. sass规则
- 注释规则
|-----------------------------------------------------------------------------------------------------|
| //comment注释 sass的注释方式，这种方式只能在scss文件中使用，不会编译到CSS文件中 /*comment注释*/ CSS的注释方式，sass中可以使用，并且可以编译到CSS文件中 |
- sass变量
|------------------------------------------------------------------------------------------------------------|
| 为什么要使用变量？ 比如企业要设置主题色，改版时需要将所有的企业色改掉，如果我们使用了变量，那么只需要修改变量的颜色就可以改掉出现的所有色值，无需大量更改了 所以，变量用于保存需要重复出现的值，方便代码的后期维护 |
| 变量的加载和读取顺序 必须先创建变量，再使用变量，否则报错 |
| 全局变量和局部变量 全局变量是直接写在scss文件中的 局部变量是写在某个选择器的{}中的，只有在作用域内才能使用，出了此选择器就用不了了 |
- 父选择器
|------------------------------------------------------------------|
| 使用&就代表它的上一层选择器，在嵌套写法中，使用父选择器&进行站位 搭配伪类、伪元素一起使用，保证选择器的结构正确 |
| .box { &：hover { } &>span{ } } 等价于： .box:hover{} .box>span{} |
- 插值语句
|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 格式: #{变量名} 上面我们学习到，变量可以保存css的值，但是我们不能直接在css选择器中直接使用变量 如果需要在css选择器中通过变量名插入变量的值，就需要用#{ }包裹变量名，才可以使用，否则报错 $daohang:nav; liebiao:list; .#{daohang}-item { color:#f00;} .#{$liebiao}-item { color: #f00;} |
- 混合指令
|------------------------------------------------------------------|
| 混合指令的语法： @mixin 创建混合指令的语法，指令的名称自定义，但注意不能用数字开头 @include 使用混合指令的语法 |
| 注意：混合指令可以定义参数，使用时要按照定义的顺序依次传参 |
- 继承
|----------------------------------------------------------------------------------------------------------------------------------|
| 格式：@extend 被继承的选择器 继承：一个元素想要使用另一个元素的全部样式 继承后会编译形成群组选择器，更加优化 我们还可以同时继承多个选择器的样式，使用逗号隔开 注意:写的是完整的选择器，不是只有名字！ 如：@extend .box2,.box4; |
- 占位符选择器%
|----------------------------------------------------------------------------------------------------------------------------------------------------|
| 如：%juxing这是一个选择器，这个选择器的样式可以被继承走 但注意:使用占位符的选择器的样式不会被编译 %juxing { width: 120px; height: 40px; } 这个样式只在scss文件中有，不会编译到css中！ .box5 { @extend %juxing; } |