本節(jié)我們學(xué)習(xí) Sass 中的循環(huán)語句，Sass 中的循環(huán)語句可以使用 @for 指令和 @while 指令來實(shí)現(xiàn)。

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


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

其中 $i 表示變量，start 表示起始值，end 表示結(jié)束值。其實(shí)這兩種方式的區(qū)別就在于，使用關(guān)鍵字 through 時會包括 end 這個數(shù)，而使用關(guān)鍵字 to 則不會包括 end 這個數(shù)。

如下代碼，使用 through 關(guān)鍵字實(shí)現(xiàn) @for 循環(huán)：


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

編譯成 css 代碼：


.width1 {  width: 10px;}
.width2 {  width: 20px;}
.width3 {  width: 30px;}

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

然后我們再來看一下 to 關(guān)鍵字的使用：


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

編譯后的 css 代碼：


.width1 {  width: 10px;}
.width2 {  width: 20px;}

和 through 關(guān)鍵字不同，to 關(guān)鍵字的循環(huán)雖然也是從 $i 的值為 1 開始循環(huán)，但是不包括 3 ，所以整個循環(huán)只循環(huán)兩遍。

@while 指令也可以用于循環(huán)樣式，后面接 SassScript 表達(dá)式，循環(huán)會一直到表達(dá)式的值為 false 時停止。

循環(huán)遍歷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 樣式，然后每次循環(huán)都會在原有的基礎(chǔ)上加 2，一直到不滿足 $num < 18 這個條件，則循環(huán)會停止執(zhí)行。

@each 指令可以用于遍歷一個列表，然后從列表中取出對應(yīng)的值。

語法：


@each $i in <list>

$i 就是一個變量名，<list> 是一個 SassScript 表達(dá)式，返回一個列表值。


$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個值，一直到列表中的值遍歷完后，循環(huán)才會停止。

學(xué)習(xí)更多技能
請點(diǎn)擊下方公眾號

Sass 循環(huán)語句，你需要學(xué)習(xí)一下