### 流程控制 （1）@if语句； ```javascript （1）@if…（单向选择）； （2）@if…@else…（双向选择）； （3）@if…@else if…（多向选择）； @mixin checkColor ($width){ @if ($width>100px) { color:red; } @else if ($width<100px){ color:green; } @else{ color:blue; } } div{ @include checkColor(100px); } 编译： div{ color:blue;} ``` （2）@for循环； ```javascript 方式1：@for $i from 开始值 through 结束值 --- 包括结束值 方式2：@for $i from 开始值 to 结束值 --- 不包括结束值 @for $i from 1 through 2{ .border-#{$i} { border:#{$i}px solid red; } } .border-1{ border: 1px solid red; } .border-2{ border: 2px solid red;} ``` （3）@while循环； ```javascript $i:3; @while ($i>0){ .item-#{$i} { width: (20px + $i); } $i : ($i - 1); //递减操作 } ``` （4）@each循环； 用@each循环快速生成背景图片样式 ```javascript $list:sprite1,sprite2; %spriteAll{ background:url("images/sprite.png") no-repeat; } @each $var in $list{ .#{$var} { @extend %spriteAll; background-position: 0 index($list,$var) * (-30px); } } 编译 .sprite1, .sprite2{ background: url("images/sprite.png") no-repeat;} .sprite1{ background-position: 0 -30px; } .sprite2{ background-position: 0 -60px; } ```