SCSS 那些年我們一起跑的迴圈
前言
好久不見，沉寂許久未發文，這次帶來的是關於 SCSS 的筆記，今天的筆記是關於 SCSS @for、@while 與 @each 的，透過學習 SCSS 迴圈的應用可以更加優雅的編寫 CSS 。
@for 語法介紹
@for <var> from <start> through <end> {}
@for <var> from <start> to <end> {}
<var> 為自行設定的參數<start> 為起始值<end> 為終止值
through 與 to 的差異在於 是否包含終止值，through 包含終止值，類似於 >= 與 <= 的概念。
效果展示
實作
這邊解釋下上面的範例：
第 1 行：定義一個 $max 的變數，數值為 6。
第 2 行：開始撰寫迴圈，變數名稱為 $i，起始值為 1，終止值為 $max。
第 3 行：#{} 裡可以帶入變數，括號裡的內容會被 SASS 編譯。
第 4 行：簡單的四則運算來設定字體大小。
以下是編譯後的結果。
下面是 to 的差異
@while 語法介紹
@while <true> {}<true> 當 while 的條件成立則迴圈會繼續執行，反之則終止。
效果展示
實作
這邊解釋下上面的範例：
第 1 行：定義一個 $color 的變數，數值為 $#000000。
第 2 行：定義一個 $amount 的變數，數值為 20。
第 3 行：當 $amount 沒有超過 100 時繼續執行迴圈內程式碼。
第 4 行：#{} 裡可以帶入變數，括號裡的內容會被 SASS 編譯。
第 5 行：lighten 可以設定顏色的明亮度，第一個參數是原本的顏色，第二個參數是百分比。
第 7 行：增加 $amount 的數值，如果沒有變動 $amount 的數值可能造成無窮迴圈。
@each 語法介紹
@each <var> in<list> {}
@each <var> in<map> {}
效果展示
實作
<list>
這邊解釋下上面的範例：
第 1 行：定義一個 $font-size 的變數，為 list 型態。
第 2 行：每次迴圈都會取出一個 $font-size的值，直至全部取完。
第 3 行：#{} 裡可以帶入變數，括號裡的內容會被 SASS 編譯。
第 4 行：設定背景色。
※ SASS 裡的 list 寫法十分簡易，透過 , 間隔即可宣告無序列表。
<map>
這邊解釋下上面的範例：
第 1 行：定義一個 $color-array 的變數，為 map 型態。
第 6 行：使用 map 時可以同時取得 key 與 value，這邊使用 $key 與 $value 來儲存數值。
第 7 行：#{} 裡可以帶入變數，括號裡的內容會被 SASS 編譯。
第 8 行：設定背景色。
※ SASS 裡的 map 寫法十分簡易，寫法與 json 類似，但{}改為()。
後記
這次的文章很簡潔，畢竟是簡單的 SCSS 語法介紹與備忘錄而已，所以沒有過多的描述，單純一個語法一個例子做說明，如果有甚麼問題都可以在下方詢問。
謝謝各位看到這邊，也請各位看倌多多指教與交流。
Learn and live.
