认识Sass

 sass中文文档：

Sass: 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规则

1.     注释规则

//comment注释  sass的注释方式，这种方式只能在scss文件中使用，不会编译到CSS文件中     /*comment注释*/ CSS的注释方式，sass中可以使用，并且可以编译到CSS文件中

2.     sass变量

为什么要使用变量？     比如企业要设置主题色，改版时需要将所有的企业色改掉，如果我们使用了变量，那么只需要修改变量的颜色就可以改掉出现的所有色值，无需大量更改了     所以，变量用于保存需要重复出现的值，方便代码的后期维护

变量的加载和读取顺序     必须先创建变量，再使用变量，否则报错

全局变量和局部变量     全局变量是直接写在scss文件中的     局部变量是写在某个选择器的{}中的，只有在作用域内才能使用，出了此选择器就用不了了

3.     父选择器

使用&就代表它的上一层选择器，在嵌套写法中，使用父选择器&进行站位     搭配伪类、伪元素一起使用，保证选择器的结构正确

.box { &：hover { } &>span{ } }     等价于： .box:hover{}   .box>span{}

4.     插值语句

格式: #{变量名}     上面我们学习到，变量可以保存css的值，但是我们不能直接在css选择器中直接使用变量     如果需要在css选择器中通过变量名插入变量的值，就需要用#{ }包裹变量名，才可以使用，否则报错     $daohang:nav; $liebiao:list; .#{$daohang}-item { color:#f00;} .#{$liebiao}-item { color: #f00;}

5.     混合指令

混合指令的语法：     @mixin 创建混合指令的语法，指令的名称自定义，但注意不能用数字开头     @include 使用混合指令的语法

注意：混合指令可以定义参数，使用时要按照定义的顺序依次传参

6.     继承

格式：@extend 被继承的选择器     继承：一个元素想要使用另一个元素的全部样式     继承后会编译形成群组选择器，更加优化     我们还可以同时继承多个选择器的样式，使用逗号隔开     注意:写的是完整的选择器，不是只有名字！  如：@extend .box2,.box4;

7.     占位符选择器%

如：%juxing这是一个选择器，这个选择器的样式可以被继承走     但注意:使用占位符的选择器的样式不会被编译     %juxing {     width: 120px;     height: 40px; }  这个样式只在scss文件中有，不会编译到css中！ .box5 {     @extend  %juxing; }