scss控制指令

控制指令

• @if @else if @else

  $type: monster;
      p {
      @if $type == ocean {
          color: blue;
      } @else if $type == matador {
          color: red;
      } @else if $type == monster {
          color: green;
      } @else {
          color: black;
      }
      }
      // 編譯爲：
      p {
          color: green;
        }

• @for循環有兩種方式：@for $var from <start> through <end>，或者 @for $var from <start> to <end>，區別在於 through 與 to 的含義：當使用 through 時，條件範圍包含 <start> 與 <end> 的值，而使用 to 時條件範圍只包含 <start> 的值不包含 <end> 的值。另外，$var 能夠是任何變量，好比 $i；<start> 和 <end> 必須是整數值。

  @for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
  }
  //編譯的結果：
  .item-1 {
   width: 2em; 
   }
  .item-2 {
   width: 4em; 
   }
  .item-3 {
   width: 6em; 
   }

---

• @each 指令的格式是 $var in <list>, $var 能夠是任何變量名，好比 $length 或者 $name，而 <list> 是一連串的值，也就是值列表。

@each $animal in puma, sea-slug, egret, salamander {
    .#{$animal}-icon {
        background-image: url('/images/#{$animal}.png');
    }
    }
    // 編譯結果： 
    .puma-icon {
        background-image: url('/images/puma.png'); }
    .sea-slug-icon {
        background-image: url('/images/sea-slug.png'); }
    .egret-icon {
        background-image: url('/images/egret.png'); }
    .salamander-icon {
        background-image: url('/images/salamander.png'); }

• 多項遍歷：

  @each $animal, $color, $cursor in (puma, black, default),
  									(sea-slug, blue, pointer),
  									(egret, white, move) {
  	.#{$animal}-icon {
  		background-image: url('/images/#{$animal}.png');
  		border: 2px solid $color;
  		cursor: $cursor;
  		}
  	}
  	// 編譯結果：
  	.puma-icon {
  			background-image: url('/images/puma.png');
  			border: 2px solid black;
  			cursor: default; }
  	.sea-slug-icon {
  			background-image: url('/images/sea-slug.png');
  			border: 2px solid blue;
  			cursor: pointer; }
  	.egret-icon {
  			background-image: url('/images/egret.png');
  			border: 2px solid white;
  			cursor: move; }
  
  	// 例子2：
  	@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
  	  #{$header} {
  		font-size: $size;
  	  }
  	}
  	// 編譯：
  	h1 {
  	  font-size: 2em; }
  	h2 {
  	  font-size: 1.5em; }
  	h3 {
  	  font-size: 1.2em; }

• @while 指令重複輸出格式直到表達式返回結果爲 false。這樣能夠實現比 @for 更復雜的循環

  $i: 6;
  @while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
  }
  // 編譯：
  .item-6 {
   width: 12em; }
  
  .item-4 {
  width: 8em; }
  
  .item-2 {
  width: 4em; }

後面補上實際開發中應用場景