工程化

要求：使用SASS插件

准备阶段

安装SASS插件

在VSCode的扩展：商店中搜索SASS，找到Live Sass Compiler 点击安装即可。

创建步骤：

1、创建文件夹并在根目录创建一个.html文件

2、创建.scss文件

3、打开编译器

编译后会生成两个文件

4、在html内部使用link引入编译好的.css文件

【优点】

1、重用

2、方便维护

【注释】

1、默认值是单行注释 //注释内容

​ 多行注释 /注释内容/ /注释内容/

注：多行注释可以编译到.css文件中

2、可以通过HTML层次结构，书写SASS代码

CSS代码在.scss中是可以嵌套的

但嵌套选择器在.css文件中则会报错。

3、当不同区域（不同标签）如何批量修改

在.css文件中，需要修改多次

在SASS中，只需要修改一次

【变量：可变的量】

sass让人们受益的一个重要特性就是它为css引入了变量。你可以把反复使用的css属性值 定义成变 量，然后通过变量名来引用它们，而无需重复书写这一属性值。

书写格式：$变量名：变量值；

注：变量先定义后引用

【混合器】

书写格式： @mixin 混合器名{声明块}

引用：

@include 混合器名

【带混合器】

书写格式：

@mixin 混合器名（参1，参2，参3）{声明块}

引用：

@include 混合器名（值1，值2，值3）

注：值的个数可以大于参数的个数，但不能小于参数的个数。

【参数默认值】

即参数有传的值时，就用传的值。

没有则传默认值

书写格式：@mixin 混合器名称（变量名：默认值）

注：把有默认值的参数往后放

【混合器，扩展运算符】

书写格式 ：@mixin 混合器名（运算符…）

【占位符】

书写格式：%自定义名字{声明块}

引用：@extend %占位符名称；