认识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，说明安装成功

平时写样式使用的是CSS,sass可以看作是CSS的“预处理器”，是一种专门的CSS编程语言

增加了变量、函数、嵌套、判断、循环等等的用法，让CSS编写更便捷，清晰

sass的语法和版本

.sass是早期sass技术文件的后缀名，3.0版本之前一直使用的是它，文件编辑语法严格

3.0版本之后，后缀名改成了.scss,这种后缀使用的就是CSS语法，学习成本大大降低

.scss文件必须通过编译，生成同名的.css文件，才可以被html使用

步骤：

1.      在目录下创建scss文件夹

2.      在scss文件夹下创建01.scss文件，代码: body{ background-color:#f00; }

3.      选择“工具”->“外部命令”->“scss/sass编译”->“编译scss/sass”

4.      会在scss文件夹下看到生成了一个同名的01.css文件，里面的内容与scss文件内容一致

1.      选择“工具”->“外部命令”->“scss/sass编译”->“插件配置”

2.      在打开的package.json文件中，修改第25行和27行的内容

"key":  "ctrl+s" 表示通过保存快捷键触发                                                                                                     
    

"onDidSaveExecution":  true 表示开启自动编译

3.      保存修改后的配置文件，重启HBuilder即可

4.      可能有的同学重启后自动编译未生效，那么需要再自己手动编译1~2次，就可以自动编译了

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

/*comment注释*/ CSS的注释方式，sass中可以使用，并且可以编译到CSS文件中

为什么要使用变量？

比如企业要设置主题色，改版时需要将所有的企业色改掉，如果我们使用了变量，那么只需要修改变量的颜色就可以改掉出现的所有色值，无需大量更改了

所以，变量用于保存需要重复出现的值，方便代码的后期维护

变量的加载和读取顺序

必须先创建变量，再使用变量，否则报错

全局变量和局部变量

全局变量是直接写在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;

}