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個值，一直到列表中的值遍歷完後，循環纔會中止。