一、SASS  文件后缀名有两种，.sass中不包含{}和；    .scss中包含{}和； 与css原生代码很类似， 所以建议使用.scss的后缀名 导入文件，可引入.scss或者.css文件，后缀名都可以去掉，区别在于，.scss文件会被考拉编译，.css文件不会 @import ""; 变量,$变量名称（自取）：值，如果在值后面接!default表示默认值,如果不想用默认值，重新声明一个即可 $border:1px solid red!default; div{   border: $border; } 嵌套，选择器嵌套，属性嵌套，@at-root跳出嵌套， 默认@at-root只会跳出选择器嵌套，而不能跳出@media或@support，如果要跳出这两种， 则需使用@at-root (without: media)，@at-root (without: support)。 这个语法的关键词有四个：all（表示所有），rule（表示常规css），media（表示media）， support（表示support，因为@support目前还无法广泛使用，所以在此不表）。 我们默认的@at-root其实就是@at-root (without:rule)。 sass中使用@mixin声明混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值 声明的@mixin通过@include来调用。 混合mixin，@mixin 名称{声明}，调用时使用@include 名称 无参数mixin @mixin widthHeight{   width: 200px;   height: 200px;}div{  @include widthHeight;} 有参数mixin @mixin background($color:green){ background: $color;} div{   @include background;}  多个参数mixin  调用时可直接传入值，如@include传入参数的个数小于@mixin定义参数的个数，则按照顺序表示，  后面不足的使用默认值，如不足的没有默认值则报错。除此之外还可以选择性的传入参数，使用参数名与值同时传入。@mixin marginPadding($margin:50px,$padding:100px){  margin: $margin;  padding: $padding;}div{  @include marginPadding;}  多组值参数mixin  如果一个参数可以有多组值，如box-shadow、transition等，那么参数则需要在变量后加三个点表示，  如$variables...。  继承  sass中，选择器继承可以让选择器继承另一个选择器的所有样式，并联合声明。  使用选择器的继承，要使用关键词@extend，后面紧跟需要继承的选择器。