SASS是SCSS3的新语法
SASS允许使用变量，所有变量以$开头。
$red: red;
div {
color: $red;
}
//也可以镶嵌在字符串里面使用，必须需要写在#{}之中，作用于属性名
$left: left;
margin-#{$left}：30px；
SASS允许在代码中使用算式。
body {
margin: (14px/2);
top: 50px + 100px;
right: $var * 10%;
}
SASS允许选择器嵌套
div h1 {
color : red;
}
//也允许属性嵌套（注意属性后面要加上冒号）
border: {
size: 2px;
style: solid;
color: black;
}
注释
SASS共有两种注释风格。
标准的CSS注释 /* comment / ，会保留到编译后的文件。
单行注释 // comment，只保留在SASS源文件中，编译后被省略。
在/后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。
SASS允许一个选择器，继承另一个选择器。
.class1 {
border: 1px solid #ddd;
}
//class2要继承class1，就要使用@extend命令：
.class2 {
@extend .class1;
font-size:120%;
}
SASS可以设置可以重用的代码块
@Mixin表示是可以重用的代码块。
@mixin center{
display: flex;
justify-content: center;
align-items: center;
}
//使用@center命令，调用这个mixin
div {
@include center;
}
//mixin的强大之处，在于可以指定参数和缺省值。
@mixin color($color: black) {
color: $color;
border: 1px solid $value;
}
//使用的时候，根据需要加入参数：
div {
@include color(red);
}
高级用法
@if 或者 @if @else
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
}
//@if @else
p {
@if 1 + 1 == 2 { border: 1px solid solid; }
@else { border: 10px solid red; }
}
还有一些循环方法......
