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