提到控制指令大家可能有點陌生。但是提到“if”、“each”、“for”和“while”，大家也許不太陌生了。很多語言中都經常和這些打交道，而SASS詳解之控制指令就是為大家介紹在SASS中怎麼使用“if”、“each”、“for”和“while”。

　SASS中的if

　　If是用來判斷用的，那麼在SASS中的if應該怎麼寫呢?如下

　　SASS程式碼

p {
	@if 1 + 1 == 2 {
		width:30px;
	}@else {
		width:100px;  
	}
}

　　編譯後的CSS程式碼

p {
  width: 30px;
}

　　有if，那麼就還得有else，就還得有“==”等一系列判斷的符號，如下

　　SASS程式碼

p {
	$a:true !default;
	$b:false !default;

	@if not($a) {
		border:1px solid red;
	}@else {
		border:1px solid green;
	}

	div{
	    @if $a or $b {
		width:300px;
	    }
	}

	li{
		height:20px;
		@if $a and $b {
			float:left;
		}
	}
	
}

$width: 5px !default;

.meng {
	height:20px;
	@if $width != 0 {
		border:1px solid red;
	}
}  

$sizeClass: small !default;

.long {
	@if $sizeClass == 'small' {
		padding:5px;
	} @else {
		padding:10px;
	}
}
 

　　編譯後的CSS程式碼

p {
  border: 1px solid green;
}
p div {
  width: 300px;
}
p li {
  height: 20px;
}

.meng {
  height: 20px;
  border: 1px solid red;
}

.long {
  padding: 5px;
}

　SASS中的each

　　這個就是迴圈的意思，詳細的大家還是看例子來的更直觀，如下

　圖片迴圈

　　SASS程式碼

@each $meng in meng1, meng2, meng3, meng4 {
  .#{$meng}-long {
    background-image: url('/images/#{$meng}.png');
  }
}
 

　　編譯後的CSS程式碼

.meng1-long {
  background-image: url("/images/meng1.png");
}

.meng2-long {
  background-image: url("/images/meng2.png");
}

.meng3-long {
  background-image: url("/images/meng3.png");
}

.meng4-long {
  background-image: url("/images/meng4.png");
}

　圖片合併

　　SASS程式碼

$sprite: long1 long2 long3 long4 long5 !default;

%spriteAll{
    background: url('menglong.png') no-repeat;
}

@each $one in $sprite {
    .#{$one}-two {
        @extend %spriteAll;     
        background-position:0 index($sprite,$one)*(-30px);
    }
}

　　編譯後的CSS程式碼

.long1-two, .long2-two, .long3-two, .long4-two, .long5-two {
  background: url("menglong.png") no-repeat;
}

.long1-two {
  background-position: 0 -30px;
}

.long2-two {
  background-position: 0 -60px;
}

.long3-two {
  background-position: 0 -90px;
}

.long4-two {
  background-position: 0 -120px;
}

.long5-two {
  background-position: 0 -150px;
}

　SASS中的for

　　for迴圈有兩種形式，分別為：@for $var from through 和@for $var from to 。$i表示變數，start表示起始值，end表示結束值，這兩個的區別是關鍵字through表示包括end這個數，而to則不包括end這個數。

　@for $var from through的例子

　　SASS程式碼

@for $i from 1 through 5 {
	.meng#{$i} {
		width : 2px * $i;
	}
}

　　編譯後的CSS程式碼

.meng1 {
  width: 2px;
}

.meng2 {
  width: 4px;
}

.meng3 {
  width: 6px;
}

.meng4 {
  width: 8px;
}

.meng5 {
  width: 10px;
}

　@for $var from to的例子

　　SASS程式碼

@for $i from 1 to 5 {
	.meng#{$i} {
		height : 2px * $i;
	}
}

　　編譯後的CSS程式碼

.meng1 {
  height: 2px;
}

.meng2 {
  height: 4px;
}

.meng3 {
  height: 6px;
}

.meng4 {
  height: 8px;
}

　SASS中的while

　　While是指多次輸出，直到該語句的巢狀樣式的計算結果為false，相比前幾個，while迴圈更加難以理解一些。

　　SASS程式碼

$i: 6;
$end : -2;

@while $i > $end {
  .item-#{$i} { width: 2px * $i; }
  $i: $i - 2;
}

　　編譯後的CSS程式碼

.item-6 {
  width: 12px;
}

.item-4 {
  width: 8px;
}

.item-2 {
  width: 4px;
}

.item-0 {
  width: 0px;
}

　　SASS詳解之控制指令就為大家介紹到這裡了，SASS詳解之控制指令是SASS中比較高階的部分，可能得需要一切其他語言的基礎才能夠理解，更需要對之前SASS基本規則有一定了解的小夥伴兒才能夠理解。不過小夥伴兒們能看到這裡，已經很厲害了。