SASS中的迭代
本文將說明如何在SASS中處理迭代。
我們將透過實際程式碼範例，逐步說明如何在SASS中進行迭代。
YouTube Video
SASS中的迭代
SASS中的迭代能幫助避免程式碼重複，並讓你建立靈活且可重複使用的樣式。
在SASS中使用迭代的理由
使用迭代有多項優點，例如：。
- 能提升程式碼的重用性，便於生成相似樣式的類別。
- 維護性提高，可讓你更容易一次性修改樣式。
- 同時也能減少錯誤。
例如，你可以一次生成不同顏色按鈕或多種尺寸元件的樣式。
SASS中用於迭代的語法
SASS中主要的迭代語法如下：。
- 利用
@for，你可以針對指定的數字範圍進行迭代。 - 利用
@each，你可以在迭代中遍歷列表或映射(map)。 - 利用
@while，你可以持續循環直到符合特定條件為止。
使用@for的迭代
@for會根據指定的數字範圍進行重複處理。
語法
1/*
2@for $i from <start> to <end> {
3 ...
4}
5
6@for $i from <start> through <end> {
7 ...
8}
9*/- 請為
<start>和<end>指定起始及結束值。使用to時，不包含結束值；而through則會包含結束值。
範例
下列程式碼會自動產生邊框寬度每次增加1px的類別。
1@for $i from 1 through 5 {
2 .border-#{$i} {
3 border-width: #{$i}px;
4 }
5}- 這段程式碼會自動產生邊框厚度每次遞增1px的類別。這裡使用
@for指令來從1到5進行循環。
編譯生成後的CSS
1.border-1 {
2 border-width: 1px;
3}
4.border-2 {
5 border-width: 2px;
6}
7.border-3 {
8 border-width: 3px;
9}
10.border-4 {
11 border-width: 4px;
12}
13.border-5 {
14 border-width: 5px;
15}- 會依序生成
.border-1到.border-5的類別，每個邊框厚度增加1px。
使用@each的迭代
@each可以使用列表或映射進行循環。當你需要高效地生成帶有模式的類別時，它非常實用。
語法
1/*
2@each $item in <list> {
3 ...
4}
5*/範例1：使用列表
下列程式碼會生成多個文字顏色的類別。
1@each $color in ("red", "blue", "green") {
2 .text-#{$color} {
3 color: #{$color};
4 }
5}- 這段程式碼會自動為列表中的每個顏色產生文字顏色類別。這裡利用
@each指令來依序處理列表中的每個值。
編譯生成後的CSS
1.text-red {
2 color: red;
3}
4.text-blue {
5 color: blue;
6}
7.text-green {
8 color: green;
9}- 當SASS檔案編譯為CSS時，會每個顏色都產生像
.text-red、.text-blue、.text-green等類別。
範例2：使用映射(map)
使用映射可以處理鍵值對(key-value pairs)。下列範例中，按鈕的背景顏色是以映射來定義的。
1$colors: (
2 primary: #3498db,
3 success: #2ecc71,
4 danger: #e74c3c
5);
6
7@each $name, $hex in $colors {
8 .bg-#{$name} {
9 background-color: #{$hex};
10 }
11}編譯生成後的CSS
1.bg-primary {
2 background-color: #3498db;
3}
4.bg-success {
5 background-color: #2ecc71;
6}
7.bg-danger {
8 background-color: #e74c3c;
9}- 當SASS檔案編譯為CSS時，每個映射鍵都會產生例如
.bg-primary、.bg-success、.bg-danger等類別。
使用@while的迭代
@while會在條件成立時持續進行循環。
語法
1/*
2@while <condition> {
3 ...
4}
5*/範例
例如，你想要逐步增加字體大小時，可以這樣撰寫：。
1$i: 1;
2
3@while $i <= 5 {
4 .font-#{$i} {
5 font-size: #{$i}rem;
6 }
7 $i: $i + 1;
8}- 你可以用
@while指令來逐步增加字體大小時進行重複操作。透過變數$i，可以自動產生從1到5的類別。
編譯生成後的CSS
1.font-1 {
2 font-size: 1rem;
3}
4.font-2 {
5 font-size: 2rem;
6}
7.font-3 {
8 font-size: 3rem;
9}
10.font-4 {
11 font-size: 4rem;
12}
13.font-5 {
14 font-size: 5rem;
15}- 當SASS檔案編譯為CSS時，類別的字體大小會自動從1rem到5rem逐一生成。
進階範例：結合迭代與巢狀(nesting)
將迭代與SASS的巢狀功能結合，可產生更進階的樣式。
範例
如下例所示，同時定義了按鈕的背景顏色與滑鼠懸停時的顏色。
1@use "sass:color";
2
3$colors: (
4 primary: #3498db,
5 success: #2ecc71,
6 danger: #e74c3c
7);
8
9@each $name, $hex in $colors {
10 .btn-#{$name} {
11 background-color: $hex;
12 color: white;
13
14 &:hover {
15 background-color: color.scale($hex, $lightness: -10%);
16 }
17 }
18}- 通過結合迭代與SASS巢狀（nesting），你可以一次性生成按鈕的背景顏色和滑鼠懸停（hover）顏色。對於地圖中的每一種顏色，會創建一個
.btn-類，並且使用巢狀（nesting）定義:hover樣式。
編譯生成後的CSS
1.btn-primary {
2 background-color: #3498db;
3 color: white;
4}
5.btn-primary:hover {
6 background-color: #2980b9;
7}
8.btn-success {
9 background-color: #2ecc71;
10 color: white;
11}
12.btn-success:hover {
13 background-color: #27ae60;
14}
15.btn-danger {
16 background-color: #e74c3c;
17 color: white;
18}
19.btn-danger:hover {
20 background-color: #c0392b;
21}- 當你將 SASS 檔案轉換為 CSS 時，每個按鈕的背景色和懸停色會自動生成，並且使用巢狀結構統一定義 :hover 樣式。
使用迭代時須注意的重點
為了撰寫更高效與易讀的程式碼，請注意以下幾點。
-
避免過度深層的巢狀 過度巢狀會降低可讀性，請盡量只保持必要的深度。
-
考慮效能影響 若透過迭代產生過多類別，CSS會變得不必要地龐大。
-
使用適當的變數名稱 像是
$i或$item這類變數，建議以有意義的名稱命名，使程式碼更易理解。
總結
善用SASS中的迭代機制，可以讓樣式設計更有效率且易於維護。特別是根據情境選擇使用@for、@each或@while，可以生成具備動態性與彈性的CSS。
您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。