[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)
}
}
```
