創(chuàng)新互聯(lián)建站專(zhuān)業(yè)網(wǎng)站制作、網(wǎng)站設(shè)計(jì)，集網(wǎng)站策劃、網(wǎng)站設(shè)計(jì)、網(wǎng)站制作于一體，網(wǎng)站seo、網(wǎng)站優(yōu)化、網(wǎng)站營(yíng)銷(xiāo)、軟文推廣等專(zhuān)業(yè)人才根據(jù)搜索規(guī)律編程設(shè)計(jì)，讓網(wǎng)站在運(yùn)行后，在搜索中有好的表現(xiàn)，專(zhuān)業(yè)設(shè)計(jì)制作為您帶來(lái)效益的網(wǎng)站！讓網(wǎng)站建設(shè)為您創(chuàng)造效益。

我們先看一看循環(huán)能做什么，以及在主流的 CSS 預(yù)處理器（Sass， Less，Stylus ）中如何使用。每一種語(yǔ)言都有特殊的語(yǔ)法，但是最終的效果是相同的。有多種方式制作 一只循環(huán)走動(dòng)的貓

(animation by Rachel Nabors) 

PostCSS 也很流行，但是本身并沒(méi)有語(yǔ)法。它被稱(chēng)為后處理器，我喜歡稱(chēng)它為 meta-preprocessor。PostCSS 允許書(shū)寫(xiě)并分享你自己的預(yù)處理器語(yǔ)法。如果你愿意，你可以在 PostCSS 中重寫(xiě) Sass 或者 Less，但是已經(jīng)有人在你之前這樣做了。

循環(huán)條件

星際迷航并非完全虛構(gòu)。如果你不小心，無(wú)限循環(huán)可能會(huì)使編譯器變得卡頓或者毀壞編譯器。雖然這不是一個(gè)消滅邪惡機(jī)器人好辦法，但是它會(huì)惹惱使用你代碼的人。所以循環(huán)的使用是有限度的——通常是由一些遞增的循環(huán)體或者對(duì)象集合定義。

在編程術(shù)語(yǔ)中：

1. While 循環(huán)是通用的，循環(huán)一直運(yùn)行直到滿足條件。請(qǐng)小心！這里容易出現(xiàn)無(wú)限循環(huán)。

2. For 循環(huán)是遞增的，運(yùn)行特定數(shù)量的循環(huán)體。

3. For-Each 循環(huán)遍歷集合或者列表，每次循環(huán)一項(xiàng)。

上述循環(huán)的使用范圍依次遞減。for-each 循環(huán)是 for 循環(huán)的一種形式， 它們也是 while 循環(huán)的一種形式。但是大多數(shù)的使用場(chǎng)景可能需要更具體的分類(lèi)。我很難在實(shí)際工作中找到 while 循環(huán)——大多數(shù)例子使用 for 或者 for-each 處理的更好。所以 Stylus 只提供了后者的語(yǔ)法。Sass 的語(yǔ)法則提供了這三種方法，而 Less 并沒(méi)有循環(huán)語(yǔ)法——但這并不會(huì)妨礙我們！開(kāi)始吧。

遍歷集合的 for-each 循環(huán)

當(dāng)有一個(gè)項(xiàng)目集合（列表或者數(shù)組）的時(shí)候，預(yù)處理器的循環(huán)是非常有用的——比如一組社交媒體圖標(biāo)和顏色，或者一列狀態(tài)修飾符（success, warning, error, 等）。因?yàn)?nbsp;for-each 循環(huán)本身就是處理項(xiàng)目集合，它是最可靠并最容易理解的循環(huán)。

我們通過(guò)循環(huán)一個(gè)簡(jiǎn)單的顏色列表來(lái)看看它是如何工作的。

在 Sass 中，我們將使用 @each 指令（@each $item in $list）來(lái)獲取顏色：

在 Stylus 中，使用 for 語(yǔ)法（for item in list）處理集合：

Less并沒(méi)有提供循環(huán)的語(yǔ)法，但是我們可以使用 recursion （遞歸）來(lái)替代。遞歸就是調(diào)用自身的函數(shù)或者 mixin 。在 Less 中，我們使用 mixins 實(shí)現(xiàn)遞歸：

.recursion() {  /* an infinite recursive loop! */
  .recursion();}

現(xiàn)在我們將向 mixins 中添加 when 關(guān)鍵字，保證循環(huán)可以停止。

.recursion() when (@conditions) { 
  /* a conditional recursive "while" loop! */
  .recursion();}

我們可以這樣創(chuàng)建 for 循環(huán)，添加一個(gè)從 1 開(kāi)始的計(jì)數(shù)器（@i），然后依次遞增（@i + 1），直到滿足條件結(jié)束（@i <= length(@list)），其中 length(@list) 表示項(xiàng)目集合的總數(shù)。如果每一次循環(huán)提取下一個(gè)列表項(xiàng)，我們將手動(dòng)創(chuàng)建 for-each 循環(huán)：

在 Less 中，你做每件事都會(huì)遇到困難（原文評(píng)論中有很多人提出了反對(duì)意見(jiàn)）。這是它的特點(diǎn)。

社交媒體按鈕

遍歷列表很有用，但是很多時(shí)候你想遍歷對(duì)象。一個(gè)普通的例子就是給社交媒體按鈕添加不同的顏色和圖標(biāo)。對(duì)于列表中的每一項(xiàng)，我們需要社交網(wǎng)絡(luò)的名稱(chēng)以及品牌顏色。

$social: (
  'facebook': #3b5999,
  'twitter': #55acee,
  'linkedin': #0077B5,
  'google': #dd4b39,
);

如果使用 Sass，我們可以使用語(yǔ)法 @each $key, $value in $array 來(lái)獲取 key 值（網(wǎng)站名稱(chēng)）和 value 值（品牌顏色）。以下是全部的循環(huán)：

Stylus 有相同的語(yǔ)法：for key, value in array

在 Less 中，我們必須手動(dòng)提取每一對(duì)：

遞增的 for 循環(huán)

For 循環(huán)可以運(yùn)行任意數(shù)量的循環(huán)體，并不局限于對(duì)象的長(zhǎng)度。你可能會(huì)使用它創(chuàng)建一個(gè)柵格系統(tǒng)（for columns from 1 through 12），遍歷色輪（for hue from 1 through 360）或者使用 nth-child給 div 編號(hào)并生成內(nèi)容。

下面我們遍歷 36 個(gè) div 元素，使用 :nth-child 給每一項(xiàng)添加編號(hào)及背景色。

Sass 提供了一個(gè)特殊的 for 循環(huán)語(yǔ)法：@for $count from $start through $finish，其中 $start和 $finish 都是整數(shù)。如果初始值比較大，Sass 會(huì)遞減而不是遞增。

through 關(guān)鍵字表示循環(huán)包含數(shù)字 36 。你也可以使用 to 關(guān)鍵字，它不包含最后一個(gè)元素，只會(huì)循環(huán)35 次：@for $i from 1 to 36 。

Stylus 也有同樣的遞增的語(yǔ)法，但是 to 和 through 需要替換成 ... and .. ：

Stylus 也提供了一個(gè) range() 函數(shù)，可以改變遞增的步數(shù)。使用 for hue in range(0, 360, 10) 可以每次以 10 的倍數(shù)遞增。

Less 需要使用遞歸 mixins 。我們可以創(chuàng)建一個(gè)迭代數(shù)的參數(shù)（@i），使用 when (@i > 0) 條件結(jié)束循環(huán)，每次迭代減一，這樣看上去像是遞減的 for 循環(huán)。

值得注意的是 CSS 也可以實(shí)現(xiàn) nth-child– 編號(hào)，不需要預(yù)處理器。然而 CSS 并沒(méi)有循環(huán)結(jié)構(gòu)，它提供了一個(gè) counter() 方法，根據(jù) DOM 的數(shù)量遞增，可以用于生成內(nèi)容。然而在 content 屬性之外使用是無(wú)效的，所以背景色并沒(méi)有變化。

柵格系統(tǒng)

我通常在抽象的 Sass 工具包中使用遞增循環(huán)，幾乎不在具體的樣式表中使用。其中一個(gè)例外是生成帶編號(hào)的選擇器，可以是 nth-child （像我們上面做的一樣），也可以是自動(dòng)生成的類(lèi)名（通常用在柵格系統(tǒng)中）。我們將創(chuàng)建一個(gè)簡(jiǎn)單的不帶間距的響應(yīng)式柵格系統(tǒng)。

每個(gè)柵格都是百分比，使用 span / context * 100% 計(jì)算——所有柵格系統(tǒng)使用的基本計(jì)算方法。以下是 Stylus 和 Less 的語(yǔ)法：

特殊的頭像

在 OddBird 上，我們?cè)O(shè)計(jì)了一個(gè)生成用戶默認(rèn)頭像的程序——但是希望默認(rèn)圖盡可能與眾不同。最后，我們只設(shè)計(jì)了 9 個(gè)獨(dú)特的圖標(biāo)，使用循環(huán)生成 1296 個(gè)不同的頭像，所以大部分用戶不會(huì)看到重復(fù)的頭像。

每個(gè)頭像有 5 個(gè)屬性：

1. 初始圖標(biāo)形狀（9 個(gè)選項(xiàng)）

2. 可以選裝 0, 90, 180, 或者 270 度（4 個(gè)選項(xiàng)）

3. 深色填充色（6 個(gè)選項(xiàng)）

4. 淺色背景色（6 個(gè)選項(xiàng)）

5. 可以反相顏色的 true/false 屬性（2 個(gè)選項(xiàng)）

代碼中有 6 個(gè)顏色，3 個(gè)循環(huán)：

1. @for $i from 0 through 定義四個(gè)旋轉(zhuǎn)角度

2. @for $i from 1 through length($colors) 可以循環(huán)顏色集合（$colors），給每個(gè)顏色賦值（$i）。通常我會(huì)使用 @each 循環(huán)遍歷顏色集合，但是如果每一項(xiàng)需要一個(gè)數(shù)值的時(shí)候，使用 @for 更簡(jiǎn)單。

3. 嵌套的 @each $reverse in (true, false)可以讓我們選擇是否將每個(gè)顏色組合的前景色和背景色反轉(zhuǎn)。

以下是使用 Sass 編寫(xiě)的最終結(jié)果：

你可以在課后把它轉(zhuǎn)成 Less 和 Stylus 的代碼。我已經(jīng)看膩了。

特殊的 while 循環(huán)

真正的 while 循環(huán)很少見(jiàn)，但是我偶爾會(huì)使用。當(dāng)我看一條路徑指向何處時(shí)會(huì)非常有用。我并不想遍歷整個(gè)集合或者特定數(shù)量的迭代——我想在找到需要的元素時(shí)就停止循環(huán)。我通常在抽象的工具包中使用，而在日常編寫(xiě)樣式表時(shí)并不需要。

我使用 Sass 創(chuàng)建了一個(gè)幫助我儲(chǔ)存及控制顏色的工具包。使用變量存儲(chǔ)顏色可能是任何預(yù)處理器最普通的使用場(chǎng)景。大多數(shù)人會(huì)這樣做：

$pink: #E2127A;
$brand-primary: $pink;
$site-background: $brand-primary;

我知道 pink 可能不是你網(wǎng)站的唯一色，但是現(xiàn)在用一個(gè)就夠了。我使用了多個(gè)變量名，因?yàn)橛欣趧?chuàng)建抽象的圖層——從基本色（pink）到更寬泛的模式（brand-primary）以及具體的使用場(chǎng)景（site-background）。我還想把單色列表轉(zhuǎn)換成預(yù)處理器可以編譯的調(diào)色板。我需要一種方法保證所有數(shù)值是相關(guān)聯(lián)的并且是一種模式。我使用的方法是在單獨(dú)的 Sass map 中，以鍵值對(duì)的形式存儲(chǔ)主題顏色。

$colors: (
  'pink': #E2127A,
  'brand-primary': 'pink',
  'site-background': 'brand-primary',
);

為什么要多此一舉？我這樣做是因?yàn)槲铱梢允褂靡粋€(gè)單獨(dú)的變量指定樣式生成器，并且自動(dòng)創(chuàng)建實(shí)時(shí)更新的調(diào)色盤(pán)。但是這是一把雙刃劍，并不適合任何人。map 不允許我像使用變量一樣給直接給鍵值對(duì)賦值。為了找到每個(gè)顏色的 value 值，我需要使用 while 循環(huán)檢索 key 值。

我經(jīng)常這樣做，但是如果你在我的代碼中搜索 Sass 的 @while， 你是找不到的。

現(xiàn)在我們可以在代碼的任何地方調(diào)用 color() 函數(shù)。

Stylus 沒(méi)有 while 循環(huán)的語(yǔ)法，但是可以使用數(shù)組變量和遞歸函數(shù)：

Less 沒(méi)有內(nèi)置的數(shù)組變量，但是我們可以創(chuàng)建鍵值對(duì)模仿同樣的效果，和社交媒體顏色的做法一樣：

@colors:
  'pink' #E2127A,
  'brand-primary' 'pink',
  'site-background' 'brand-primary'
;

我們將創(chuàng)建 @array-get mixin ，使用 key 值從數(shù)組中檢索 value 值，然后創(chuàng)建遞歸的 while 循環(huán)來(lái)跟隨路徑：

作為示例可以運(yùn)行，但是在 Less 中還有更好的方法，你可以不使用別名和命名變量構(gòu)成的數(shù)組（不像 Sass 或者 Stylus）：

既然顏色在一個(gè)變量中可行，我可以使用循環(huán)生成調(diào)色板。以下是使用 Sass 做的例子：

我相信你可以比我做的更漂亮。

Getting Loopy!

如果你不知道該什么時(shí)候使用循環(huán)，時(shí)刻留意循環(huán)體。你是不是有大量遵循相同模式的選擇器，或者重復(fù)的計(jì)算？下面告訴你如何判斷哪個(gè)循環(huán)是最好的：

1. 如果你可以列出并命名循環(huán)中的項(xiàng)目，使用 for-each 遍歷。

2. 如果循環(huán)的次數(shù)比循環(huán)體本身重要，或者如果你需要給每一項(xiàng)編號(hào)，請(qǐng)使用 for 循環(huán)。

3. 如果您需要訪問(wèn)同一個(gè)循環(huán)，只是輸入值不同，嘗試遞歸函數(shù)。

4. 對(duì)于其它情況（幾乎從來(lái)沒(méi)有），使用 while 循環(huán)。

5. 如果你使用 Less… 祝你好運(yùn)！