Sass预处理

为什么使用 Sass?

CSS 本身语法不够强大，导致重复编写一些代码，无法实现复用，而且在代码也不方便维护。

Sass 引入合理的样式复用机制，增加了规则、变量、混入、选择器、继承、内置函数等等特性。

 特色功能 (Features)

• 完全兼容 CSS3
• 在 CSS 基础上增加变量、嵌套 (nesting)、混合 (mixins) 等功能
• 通过函数进行颜色值与属性值的运算
• 提供控制指令等高级功能
• 自定义输出格式 

两种语法格式:

 .scss 作为拓展名

.sass 作为拓展名。

Sass 是如何工作的？

浏览器并不支持 Sass 代码。因此，你需要使用一个 Sass 预处理器将 Sass 代码转换为 CSS 代码。

在VS code中 安装Sass:

        在vs code中编译sass 1、在拓展商店里搜索“easy sass”，并安装，安装成功后点重新加载。 2、接下来进行配置： 在 vs code 菜单栏依次点击“文件 首选项 设置”，打开 settings.json 全局配置文件。（两款可任选一款下载）

下载完成后重新加载，创建Sass文件:

 Sass的使用:

嵌套规则:

 

 父选择器&：

在使用伪类选择器会用到