1、SASS的两种文件后缀
（1）sass: sass结尾以缩进替代{}表示层级结构，语句后面不用编写分号。
（2）scss: scss以{}表示层级结构，语句后面需要写分号。企业开发中推荐使用.scss结尾。
2、SASS的注释
sass中，单行注释不会被编译到，而多行注释会被编译到。
3、SASS的变量
语法：$变量名称: 值;
$width: 200px;//定义变量
.box{
width: $width;//使用变量
}变量的特点：
（1）、后定义的会覆盖先定义的。
（2）、一个变量可以赋值给另一个变量。
$width: 200px;
$height: $width;//一个变量可以赋值给另一个变量
.box{
width: $width;
height: $height;
}（3）、区分局部变量和全局变量，访问采用就近原则。
定义在大括号中的变量只能在大括号范围内使用。定义在外面的变量可以在整个css文件中使用。
$width: 200px;//可以在整个css文件中使用
$height: $width;
.box{
$width: 666px;//这个变量只能在.box{}中使用
width: $width;//最终这里的值是666px
height: $height;
}（4）、变量必须先定义后使用，否则编译就会报错。（在less中可以先使用后定义）
4、变量插值
如果是属性的取值可以直接使用变量，但是如果是属性名称或者选择器名称并不能直接使用变量，必须使用变量插值的格式。
变量插值语法：#{$变量名}
$width: 200px;
$height: $width;
$h: width;
.box{
$width: 666px;
#{$h}: $width;//变量插值，编译后变成：width: 666px;
height: $height;
}$f: form;//定义变量
#{$f}{//使用变量插值
width: 200px;
}
//编译结果：
form {
width: 200px;
}5、SASS中的运算
sass中支持加减乘除（+、-、*、/）运算。
div{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
margin-left: -(200 / 2);//使用了除法
}
//编译后：
div {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
margin-left: -100;//编译结果是200 / 2的值
}6、混合的定义和引用
（1）、混合的定义语法
@mixin 混合名称{}
//或者 混合名称后面加一对括号
@mixin 混合名称(){}//定义一个名为center的混合
@mixin center{
text-align: center;
margin: 0 auto;
}（2）、混合的引用
@include 混合名称;
//如果混合名称加了括号，引用的时候需要加上括号
@include 混合名称();.box{
width: 666px;
height: $height;
@include center;//调用引用
//@include center();
}7、带参数的混合
（1）、语法
@mixin 混合名称( $参数1, $参数2, $参数3...,$参数n ){}（2）、定义带参数的混合
//定义带参数的混合
@mixin whc( $w, $h, $bgcolor ){
width: $w;
height: $h;
background-color: $bgcolor;
}（3）、调用带参数的混合
//调用带参数的混合
.box1{
@include whc( 200px, 300px, red );
}
.box2{
@include whc(100px, 120px, blue);
}编译后的效果：
.box1 {
width: 200px;
height: 300px;
background-color: red;
}
.box2 {
width: 100px;
height: 120px;
background-color: blue;
}（4）、设置默认参数
@mixin whc( $w:200px, $h:300px, $bgcolor:#000 ){
width: $w;
height: $h;
background-color: $bgcolor;
}设置了默认参数以后，如果在调用的时候不传参，编译不会报错。且会自动使用默认的参数的值。编译的结果变成：
.box1{
@include whc();
}
//编译结果
.box1 {
width: 200px;
height: 300px;
background-color: #000;
}只给其中指定的参数传值，其他的仍然是用默认：
.box1{
@include whc( $bgcolor:yellow);//只给$bgcolor传值，另外两个参数用默认的
}编译结果：
.box1 {
width: 200px;
height: 300px;
background-color: yellow;
}8、SASS中的可变参数
@mixin animate($name, $time, $mode, $delay){
transition: $name $time $mode $delay;
}可以变成如下写法：
@mixin animate($args...){
transition: $args;
}调用:
.box3 {
@include animate(all, 4s, linear, 0s);
}编译结果：
.box3 {
transition: all, 4s, linear, 0s;
}或者：
//定义
@mixin animate($name, $time, $args...){
transition: $name $time $args;
}
//调用
.box3{
@include animate(all, 4s, linear, 0s);
}
//编译结果
.box3 {
transition: all 4s linear, 0s;
}9、导入其他SASS文件
其实原生的CSS也支持通过@import导入其它的CSS文件，只不过不常用，不常用的原因在于原生的@import导入其它的CSS文件时，只有执行到@import时，浏觅器才会去下载对应 css文件，这导致请求次数变多，页面加载起来特别慢。而SASS中的@import是直接将导入的文件拷贝到当前文件中生成一份CSS， 所以只会请求一次，速度更快。
例如，有两个文件1.scss和2.scss
1.scss:
@mixin center{
text-align: center;
margin: 0 auto;
}2.scss:
@import "1.scss";
div{
@include center;//在这里就可以直接调用1.scss里面的混合
} 相当于将1.scss里面的内容拷贝了一份到2.scss中。
10、SASS内置函数
内置函数文档地址：https://sass-lang.com/documentation/modules/
11、SASS中的层级结构
如果不想被编译成后代，可以使用"&"符号。
.father{
width: 100px;
height: 300px;
.son{
width: 500px;
height: 50px;
}
}编译结果：
.father {
width: 100px;
height: 300px;
}
//可以看到.son是.father的后代（中间有空格）
.father .son {
width: 500px;
height: 50px;
}使用“&”符号：
.father{
width: 100px;
height: 300px;
&.son{//加了&符号
width: 500px;
height: 50px;
}
}编译结果：
.father {
width: 100px;
height: 300px;
}
//.father.son变成了平级（中间没有空格），.son不再是.father的后代
.father.son {
width: 500px;
height: 50px;
}12、SASS继承
语法：@extend .类名;
.test{
width: 300px;
height: 300px;
background-color: #0a4b78;
}
.form-box{
@extend .test;
.div-box{
@extend .test;
}
}编译结果：
.test, .form-box .div-box, .form-box {
width: 300px;
height: 300px;
background-color: #0a4b78;
}13、SASS中的条件判断
语法：
@if(条件){
//...
}@else if(条件){
//...
}@else{
//...
}@mixin triangle($dir, $width, $color){
width: 0;
height: 0;
border-width: $width;
border-style: solid solid solid solid;
@if($dir == Up){
border-color: transparent transparent $color transparent;
}@else if($dir == Down){
border-color: $color transparent transparent transparent;
}@else if($dir == Left){
border-color: transparent transparent transparent $color;
}@else if($dir == Right){
border-color: transparent $color transparent transparent;
}
}调用：
.triangle{
@include triangle(Right, 10px, blue);
}根据$dir参数判断显示不同的效果。
14、SASS中的循环
（1）、for循环
语法：两种写法
@for $i from 起始正数 through 结束正数{
//循环体
}
//或者
@for $i from 起始正数 to 结束正数{
//循环体
}案例：ul有10个li，背景颜色为red，现在需要将其中第3～7个li背景设置为skyblue。使用循环实现如下：
ul li{
background-color: red;
line-height: 30px;
@for $i from 3 through 7{
&:nth-child(#{$i}){
background-color: skyblue;
}
}
}编译结果：
ul li {
background-color: red;
line-height: 30px;
}
ul li:nth-child(3) {
background-color: skyblue;
}
ul li:nth-child(4) {
background-color: skyblue;
}
ul li:nth-child(5) {
background-color: skyblue;
}
ul li:nth-child(6) {
background-color: skyblue;
}
ul li:nth-child(7) {
background-color: skyblue;
}（2）、while循环
语法：
$i:3;//定义变量
@while (条件){
//循环体
$i:$i+1;
}$i:3;
@while ($i <= 7){
&:nth-child(#{$i}){
background-color: skyblue;
}
$i:$i+1;
}编译结果：
ul li:nth-child(3) {
background-color: skyblue;
}
ul li:nth-child(4) {
background-color: skyblue;
}
ul li:nth-child(5) {
background-color: skyblue;
}
ul li:nth-child(6) {
background-color: skyblue;
}
ul li:nth-child(7) {
background-color: skyblue;
}