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; }
