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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章