[toc=3,4]
## SASS
### 编译风格
* nested：嵌套缩进的css代码，它是默认值。
* expanded：没有缩进的、扩展的css代码。
* compact：简洁格式的css代码。
* compressed：压缩后的css代码。
### 变量
```
$height: 10;
$color: red;
$border: 1px solid #ccc !default;
$list: success, error, warning, danger
$map: ('info':'green', 'error':'red')
.#{$var} {
color: $var;
}
```
### @if @else
### @for $var from
> @for $var from $start through $end
含最后值
> @for $var from $start to $end
不含最后的值
```
@for $var from 1 through 12 {
.col-xs-#{$var} {
width: 600 / 12 * $var * 1px;
}
}
```
### @while
```
$var : 1;
@while $var < 13 {
.col-sm-#{$var} {
width: 900/12 * $var * 1px;
}
$var : $var + 1;
}
```
### @each $var in
```
$list: success, info, warning, danger;
@each $var in $list{
.#{$var}-avatar {
background-image: url("/img/#{$var}.png");
}
}
```
```
@mixin col($type, $index, $width) {
.col-#{$type}-#{$index} {
width: $width / 12 * $index * 1px;
}
}
@each $type,$width in (xs:600, sm:720, md:900, lg:1020) {
@for $index from 1 through 12 {
@include col($type, $index, $width)
}
}
```
