Sass 循環語句，你需要學習一下

本節我們學習 Sass 中的循環語句，Sass 中的循環語句可以使用 @for 指令和 @while 指令來實作。

@for指令

@for 指令可以用于循環生成樣式，@for 指令有兩種類型，如下所示：

// 第一種
@for $i from <start> through <end>
    
// 第二種
@for $i from <start> to <end>      

其中 $i 表示變量，start 表示起始值，end 表示結束值。其實這兩種方式的差別就在于，使用關鍵字 through 時會包括 end 這個數，而使用關鍵字 to 則不會包括 end 這個數。

示例：

如下代碼，使用 through 關鍵字實作 @for 循環：

@for $i from 1 through 3{
    .width#{$i} {
        width: $i * 10px; 
    }
}      

編譯成 css 代碼：

.width1 {
  width: 10px;
}


.width2 {
  width: 20px;
}


.width3 {
  width: 30px;
}      

上述代碼中，循環一共循環了三次，從 $i 的值為 1 開始循環，一直到 3 結束，并且包括了 3。

示例：

然後我們再來看一下 to 關鍵字的使用：

@for $i from 1 to 3{
    .width#{$i} {
        width: $i * 10px; 
    }
}      

編譯後的 css 代碼：​

.width1 {
  width: 10px;
}


.width2 {
  width: 20px;
}      

和 through 關鍵字不同，to 關鍵字的循環雖然也是從 $i 的值為 1 開始循環，但是不包括 3 ，是以整個循環隻循環兩遍。

@while指令

@while 指令也可以用于循環樣式，後面接 SassScript 表達式，循環會一直到表達式的值為 false 時停止。

示例：

循環周遊12px、14px、16px 的字型樣式：

$num: 12;


@while $num < 18 {
    .f-#{$num} { 
        font-size: #{$num}px; 
      }
    $num: $num + 2;
}      

編譯成 CSS 代碼：​

.f-12 {
  font-size: 12px;
}


.f-14 {
  font-size: 14px;
}


.f-16 {
  font-size: 16px;
}      

變量 $num 的初始值為 12，首先會輸出 font-size:12px 樣式，然後每次循環都會在原有的基礎上加 2，一直到 不滿足 $num < 18 這個條件，則循環會停止執行。

@each 指令

@each 指令可以用于周遊一個清單，然後從清單中取出對應的值。

文法：

@each $i in <list>      

$i 就是一個變量名，<list> 是一個 SassScript 表達式，傳回一個清單值。

示例：

$list: 5 10 15 20 25;


@each $i in $list {
    .p-#{$i}{
        padding: #{$i}px;
    }
}      

編譯成 CSS 代碼：

.p-5 {
  padding: 5px;
}


.p-10 {
  padding: 10px;
}


.p-15 {
  padding: 15px;
}


.p-20 {
  padding: 20px;
}


.p-25 {
  padding: 25px;
}      

可以看到上述代碼中，我們周遊了定義好的 $list 中的5個值，一直到清單中的值周遊完後，循環才會停止。

學習更多技能

請點選下方公衆号

​