Sass（Syntactically Awesome Style Sheets）是一种CSS预处理器，它提供了一种更高级、更强大的方式来编写CSS。Sass使用一种类似于Ruby的语法，允许您使用变量、嵌套规则、混合（mixins）、函数等特性，以更简洁、可维护的方式编写CSS。
css编写时权重难以控制，嵌套层级多导致代码编写不方便。sass的出现就是为了解决css的缺点。 sass不能直接被浏览器识别，所以需要进行编译成正常的css文件才能被浏览器使用(vue可以直接 使用)。
1. 变量
在Sass中，您可以使用变量来存储颜色、字体堆栈或其他重复使用的值。变量以美元符号($)开头，后面跟着变量名。例如：
$primary-color: #333;
$font-stack: Helvetica, sans-serif;
body {
color: $primary-color;
font: 100% $font-stack;
}
编译后的CSS代码如下：
body {
color: #333;
font: 100% Helvetica, sans-serif;
}
2. 嵌套规则
在Sass中，您可以使用嵌套规则来组织CSS代码，使其更易于阅读和维护。嵌套规则允许您将一个选择器的样式应用于另一个选择器。例如：
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
编译后的CSS代码如下：
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
3. 混合（Mixins）
混合允许您定义可重用的CSS块，并在您的样式表中多次使用它们。例如：
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius(10px); }
