sass 使用规则、变量、混入、选择器、继承、判断、遍历、内置函数等等

介绍: 层叠样式表语言，动态样式语言、 CSS 预处理器、扩展语言；

优点：减少 CSS 重复的代码，节省开发时间、完全兼容所有版本的 CSS；

Sass 文件后缀为 .scss；

为什么使用sass： 

CSS 本身语法不够强大，代码重复率高，无法复用，不方便维护；Sass 引入合理的样式复用机制，增加了规则、变量、混入、选择器、继承、内置函数等等特性。

浏览器并不支持 Sass 代码。需要将 Sass 代码转换为 CSS 代码。

node安装：npm install -g sass，编译 sass **.scss **.css

 express框架：可以安装node-sass-middleware，在入口文件中，监听及编译，自行百度

 vue：可以安装 sass-loader、node-sass对scss进行支持

1. 定义变量及使用，变量用于存储一些信息，它可以重复使用，并且容易维护，比如：初始文字风格是#333，后续修改为#808080，只需修改一处变量

/* 定义变量与值 */
$basecolor: #82a1e;
/* 使用变量 */
.box {
  background-color: $basecolor;
}

// Sass 变量的作用域只能在当前的层级上有效果，如下所示 h1 的样式为它内部定义的 pink，p 标签则是为 r