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

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

(animation by Rachel Nabors) 

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

循環(huán)條件

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

在編程術語中：

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

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

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

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

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

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

我們通過循環(huán)一個簡單的顏色列表來看看它是如何工作的。

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

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

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

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

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

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

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

在 Less 中，你做每件事都會遇到困難（原文評論中有很多人提出了反對意見）。這是它的特點。

社交媒體按鈕

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

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

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

Stylus 有相同的語法：for key, value in array

在 Less 中，我們必須手動提取每一對：

遞增的 for 循環(huán)

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

下面我們遍歷 36 個 div 元素，使用 :nth-child 給每一項添加編號及背景色。

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

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

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

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

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

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

柵格系統(tǒng)

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

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

特殊的頭像

在 OddBird 上，我們設計了一個生成用戶默認頭像的程序——但是希望默認圖盡可能與眾不同。最后，我們只設計了 9 個獨特的圖標，使用循環(huán)生成 1296 個不同的頭像，所以大部分用戶不會看到重復的頭像。

每個頭像有 5 個屬性：

<svg class="avatar" data-dark="1" data-light="2" data-reverse="true" data-rotation="3">
  <use xlink:href="#icon-avatar-1" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

1. 初始圖標形狀（9 個選項）

2. 可以選裝 0, 90, 180, 或者 270 度（4 個選項）

3. 深色填充色（6 個選項）

4. 淺色背景色（6 個選項）

5. 可以反相顏色的 true/false 屬性（2 個選項）

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

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

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

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

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

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

特殊的 while 循環(huán)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Getting Loopy!

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

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

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

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

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

5. 如果你使用 Less… 祝你好運！

文章標題：CSS預處理器中的循環(huán)
當前地址：http://chinadenli.net/article34/joegse.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供微信小程序、手機網(wǎng)站建設、移動網(wǎng)站建設、服務器托管、網(wǎng)站內(nèi)鏈、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)