官网：https://www.sass.hk/
1，嵌套规则
1.1普通嵌套：Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器
1.2父选择器 &：（hover）
在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器，例如，当给某个元素设定 hover 样式时，或者当 body 元素有某个 classname 时，可以用 & 代表嵌套规则外层的父选择器。
a { font-weight: bold; text-decoration: none; &:hover { text-decoration: underline; } body.firefox & { font-weight: normal; } }
编译为
a {
font-weight: bold;
text-decoration: none; }
a:hover {
text-decoration: underline; }
body.firefox a {
font-weight: normal; }
编译后的 CSS 文件中 & 将被替换成嵌套外层的父选择器，如果含有多层嵌套，最外层的父选择器会一层一层向下传递：
#main { color: black; a { font-weight: bold; &:hover { color: red; } } } 编译为 #main { color: black; } #main a { font-weight: bold; } #main a:hover { color: red; }
& 必须作为选择器的第一个字符，其后可以跟随后缀生成复合的选择器，例如
#main { color: black; &-sidebar { border: 1px solid; } } 编译为 #main { color: black; } #main-sidebar { border: 1px solid; }
当父选择器含有不合适的后缀时，Sass 将会报错。
2，变量
2.1 SassScript 最普遍的用法就是变量，变量以美元符号开头，赋值方法与 CSS 属性的写法一样：
$width: 5em; //直接使用即调用变量： #main { width: $width; } //变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加 !global 声明： #main { $width: 5em !global; width: $width; } #sidebar { width: $width; } 编译结果为： #main { width: 5em; } #sidebar { width: 5em; }
2.2 vuecli3中使用全局变量：
https://www.cnblogs.com/lonhon/p/9887993.html
3，混合器：
可以通过sass的混合器实现大段样式的重用
@mixin rounded-corners {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
notice {
background-color: green;
border: 2px solid #00aa00;
@include rounded-corners;
}
//sass最终生成：
.notice {
background-color: green;
border: 2px solid #00aa00;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
在.notice中的属性border-radius-moz-border-radius和-webkit-border-radius全部来自rounded-corners这个混合器。
混合器使用@mixin标识符定义。然后就可以在你的样式表中通过@include来使用这个混合器，放在你希望的任何地方。@include调用会把混合器中的所有样式提取出来放在@include被调用的地方。
通过使用参数，你可以使用混合器把你样式中的通用样式抽离出来，然后轻松地在其他地方重用。实际上，混合器太好用了，一不小心你可能会过度使用。大量的重用可能会导致生成的样式表过大，导致加载缓慢。