sass的使用方法

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