sass的优缺点
优点：css预处理器为css增加一些编程的特性，无需考虑浏览器的兼容性问题。支持嵌套、变量和逻辑等。可以让css更加简介、提高代码复用性、逻辑分明等等。
缺点：css的文件体积和复杂度不可控；增加了调试难度和成本
常用的知识点
1、注释
/*
多行
*/
//单行
/*! 不会被压缩*/
2、变量 （会有作用域的限制）
$color: red; //在值的后边加global会变为全局属性
3、模板字符串
#{变量}
4、@import 引入文件
支持同时导入多个文件，使用逗号隔开即可
以下情况会导致文件仅作为普通css语句，不会导入任何Sass文件
- 文件拓展名是.css
- 文件名以http://开头
- 文件名是url()
- @import包含media queries
5、继承 @extend
.a{
width:100px;
height:100px;
}
.b{
@extend .a;
}
6、@if的使用
p{@if 1+1==2{color:red;}
}p{@if 1+1==2{color:red;}@else{color:blue}
}
7、 循环语句 @for
语法
@for $var from <start> through <end>或@for $var from <start> to <end>
through和to的相同点与不同点?
相同点：都包含<start>值
不同点：through包含<end>值，但to不包含<end>的值
@for $I from 1 through 3{.item-#{$I}{ width: 2em * $i; }
}
//等价于
.item-1{width:2em;
}
.item-2{width:4em;
}
.item-3{width:6em;
}
8、循环语句 @while
语法：
@while experssin
指令重复输出格式直到表达式返回结果为false。这样可以实现比@for更复杂的循环，只是很少会用到
$1: 6;
@while $1>0{.item-#{$i} { width : 2rem * $1; }$1: $1-2; //给i重新赋值
}
//等价于
.item-6{width: 12em;
}
.item-4{width: 8em;
}
.item-2{width: 4em;
}
