溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
我們先看一看循環能做什么，以及在主流的 CSS 預處理器（Sass， Less，Stylus ）中如何使用。每一種語言都有特殊的語法，但是最終的效果是相同的。有多種方式制作 一只循環走動的貓
(animation by Rachel Nabors)
PostCSS 也很流行，但是本身并沒有語法。它被稱為后處理器，我喜歡稱它為 meta-preprocessor。PostCSS 允許書寫并分享你自己的預處理器語法。如果你愿意，你可以在 PostCSS 中重寫 Sass 或者 Less，但是已經有人在你之前這樣做了。
星際迷航并非完全虛構。如果你不小心，無限循環可能會使編譯器變得卡頓或者毀壞編譯器。雖然這不是一個消滅邪惡機器人好辦法，但是它會惹惱使用你代碼的人。所以循環的使用是有限度的——通常是由一些遞增的循環體或者對象集合定義。
在編程術語中：
While 循環是通用的，循環一直運行直到滿足條件。請小心！這里容易出現無限循環。
For 循環是遞增的，運行特定數量的循環體。
For-Each 循環遍歷集合或者列表，每次循環一項。
上述循環的使用范圍依次遞減。for-each 循環是 for 循環的一種形式， 它們也是 while 循環的一種形式。但是大多數的使用場景可能需要更具體的分類。我很難在實際工作中找到 while 循環——大多數例子使用 for 或者 for-each 處理的更好。所以 Stylus 只提供了后者的語法。Sass 的語法則提供了這三種方法，而 Less 并沒有循環語法——但這并不會妨礙我們！開始吧。
for-each 循環當有一個項目集合（列表或者數組）的時候，預處理器的循環是非常有用的——比如一組社交媒體圖標和顏色，或者一列狀態修飾符（success, warning, error, 等）。因為 for-each 循環本身就是處理項目集合，它是最可靠并最容易理解的循環。
我們通過循環一個簡單的顏色列表來看看它是如何工作的。
在 Sass 中，我們將使用 @each 指令（@each $item in $list）來獲取顏色：
在 Stylus 中，使用 for 語法（for item in list）處理集合：
Less并沒有提供循環的語法，但是我們可以使用 recursion （遞歸）來替代。遞歸就是調用自身的函數或者 mixin 。在 Less 中，我們使用 mixins 實現遞歸：
.recursion() { /* an infinite recursive loop! */
.recursion();}現在我們將向 mixins 中添加 when 關鍵字，保證循環可以停止。
.recursion() when (@conditions) {
/* a conditional recursive "while" loop! */
.recursion();}我們可以這樣創建 for 循環，添加一個從 1 開始的計數器（@i），然后依次遞增（@i + 1），直到滿足條件結束（@i <= length(@list)），其中 length(@list) 表示項目集合的總數。如果每一次循環提取下一個列表項，我們將手動創建 for-each 循環：
在 Less 中，你做每件事都會遇到困難（原文評論中有很多人提出了反對意見）。這是它的特點。
遍歷列表很有用，但是很多時候你想遍歷對象。一個普通的例子就是給社交媒體按鈕添加不同的顏色和圖標。對于列表中的每一項，我們需要社交網絡的名稱以及品牌顏色。
$social: ( 'facebook': #3b5999, 'twitter': #55acee, 'linkedin': #0077B5, 'google': #dd4b39, );
如果使用 Sass，我們可以使用語法 @each $key, $value in $array 來獲取 key 值（網站名稱）和 value 值（品牌顏色）。以下是全部的循環：
Stylus 有相同的語法：for key, value in array
在 Less 中，我們必須手動提取每一對：
for 循環For 循環可以運行任意數量的循環體，并不局限于對象的長度。你可能會使用它創建一個柵格系統（for columns from 1 through 12），遍歷色輪（for hue from 1 through 360）或者使用 nth-child給 div 編號并生成內容。
下面我們遍歷 36 個 div 元素，使用 :nth-child 給每一項添加編號及背景色。
Sass 提供了一個特殊的 for 循環語法：@for $count from $start through $finish，其中 $start和 $finish 都是整數。如果初始值比較大，Sass 會遞減而不是遞增。
through 關鍵字表示循環包含數字 36 。你也可以使用 to 關鍵字，它不包含最后一個元素，只會循環35 次：@for $i from 1 to 36 。
Stylus 也有同樣的遞增的語法，但是 to 和 through 需要替換成 ... and .. ：
Stylus 也提供了一個 range() 函數，可以改變遞增的步數。使用 for hue in range(0, 360, 10) 可以每次以 10 的倍數遞增。
Less 需要使用遞歸 mixins 。我們可以創建一個迭代數的參數（@i），使用 when (@i > 0) 條件結束循環，每次迭代減一，這樣看上去像是遞減的 for 循環。
值得注意的是 CSS 也可以實現 nth-child– 編號，不需要預處理器。然而 CSS 并沒有循環結構，它提供了一個 counter() 方法，根據 DOM 的數量遞增，可以用于生成內容。然而在 content 屬性之外使用是無效的，所以背景色并沒有變化。
我通常在抽象的 Sass 工具包中使用遞增循環，幾乎不在具體的樣式表中使用。其中一個例外是生成帶編號的選擇器，可以是 nth-child （像我們上面做的一樣），也可以是自動生成的類名（通常用在柵格系統中）。我們將創建一個簡單的不帶間距的響應式柵格系統。
每個柵格都是百分比，使用 span / context * 100% 計算——所有柵格系統使用的基本計算方法。以下是 Stylus 和 Less 的語法：
在 OddBird 上，我們設計了一個生成用戶默認頭像的程序——但是希望默認圖盡可能與眾不同。最后，我們只設計了 9 個獨特的圖標，使用循環生成 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>
初始圖標形狀（9 個選項）
可以選裝 0, 90, 180, 或者 270 度（4 個選項）
深色填充色（6 個選項）
淺色背景色（6 個選項）
可以反相顏色的 true/false 屬性（2 個選項）
代碼中有 6 個顏色，3 個循環：
@for $i from 0 through 定義四個旋轉角度
@for $i from 1 through length($colors) 可以循環顏色集合（$colors），給每個顏色賦值（$i）。通常我會使用 @each 循環遍歷顏色集合，但是如果每一項需要一個數值的時候，使用 @for 更簡單。
嵌套的 @each $reverse in (true, false)可以讓我們選擇是否將每個顏色組合的前景色和背景色反轉。
以下是使用 Sass 編寫的最終結果：
你可以在課后把它轉成 Less 和 Stylus 的代碼。我已經看膩了。
while 循環真正的 while 循環很少見，但是我偶爾會使用。當我看一條路徑指向何處時會非常有用。我并不想遍歷整個集合或者特定數量的迭代——我想在找到需要的元素時就停止循環。我通常在抽象的工具包中使用，而在日常編寫樣式表時并不需要。
我使用 Sass 創建了一個幫助我儲存及控制顏色的工具包。使用變量存儲顏色可能是任何預處理器最普通的使用場景。大多數人會這樣做：
$pink: #E2127A; $brand-primary: $pink; $site-background: $brand-primary;
我知道 pink 可能不是你網站的唯一色，但是現在用一個就夠了。我使用了多個變量名，因為有利于創建抽象的圖層——從基本色（pink）到更寬泛的模式（brand-primary）以及具體的使用場景（site-background）。我還想把單色列表轉換成預處理器可以編譯的調色板。我需要一種方法保證所有數值是相關聯的并且是一種模式。我使用的方法是在單獨的 Sass map 中，以鍵值對的形式存儲主題顏色。
$colors: ( 'pink': #E2127A, 'brand-primary': 'pink', 'site-background': 'brand-primary', );
為什么要多此一舉？我這樣做是因為我可以使用一個單獨的變量指定樣式生成器，并且自動創建實時更新的調色盤。但是這是一把雙刃劍，并不適合任何人。map 不允許我像使用變量一樣給直接給鍵值對賦值。為了找到每個顏色的 value 值，我需要使用 while 循環檢索 key 值。
我經常這樣做，但是如果你在我的代碼中搜索 Sass 的 @while， 你是找不到的。
現在我們可以在代碼的任何地方調用 color() 函數。
Stylus 沒有 while 循環的語法，但是可以使用數組變量和遞歸函數：
Less 沒有內置的數組變量，但是我們可以創建鍵值對模仿同樣的效果，和社交媒體顏色的做法一樣：
@colors: 'pink' #E2127A, 'brand-primary' 'pink', 'site-background' 'brand-primary' ;
我們將創建 @array-get mixin ，使用 key 值從數組中檢索 value 值，然后創建遞歸的 while 循環來跟隨路徑：
作為示例可以運行，但是在 Less 中還有更好的方法，你可以不使用別名和命名變量構成的數組（不像 Sass 或者 Stylus）：
既然顏色在一個變量中可行，我可以使用循環生成調色板。以下是使用 Sass 做的例子：
我相信你可以比我做的更漂亮。
如果你不知道該什么時候使用循環，時刻留意循環體。你是不是有大量遵循相同模式的選擇器，或者重復的計算？下面告訴你如何判斷哪個循環是最好的：
如果你可以列出并命名循環中的項目，使用 for-each 遍歷。
如果循環的次數比循環體本身重要，或者如果你需要給每一項編號，請使用 for 循環。
如果您需要訪問同一個循環，只是輸入值不同，嘗試遞歸函數。
對于其它情況（幾乎從來沒有），使用 while 循環。
如果你使用 Less… 祝你好運！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
