1. 繼承

• • 在 SASS 中，繼承指的是一個選擇器繼承另一個選擇器的樣式，這可以避免重複編寫相同的樣式。繼承使用 @extend 指令來實現

a. 優點

• 減少重複代碼：當多個元素共用相同的樣式時，繼承可以避免重複定義這些樣式
• 提升一致性：通過繼承，保證不同選擇器間樣式的一致性

b. 缺點

• 影響樣式範圍：過多的繼承會增加樣式的耦合性，可能導致預期外的影響範圍擴大。
• 繼承層次過深：過度繼承可能導致層次過深，增加樣式表的複雜性

c. 例子

%base-button {
padding: 10px 20px;
font-size: 16px;
border-radius: 5px;
}

.button-primary {
@extend %base-button; // 繼承 %base-button 的所有樣式
background-color: blue;
color: white;
}

.button-secondary {
@extend %base-button; // 繼承 %base-button 的所有樣式
background-color: gray;
color: black;
}

2. 疊代

• SASS 允許我們使用循環結構來生成樣式。例如，使用 @for 或 @each 來產生一系列具有相同樣式結構但略有不同的類別

a. 例子

@for $i from 1 through 3 {
.item-#{$i} {
width: 100px * $i; // 每個類別的寬度都會隨著 i 的增加而改變
height: 50px;
}
}
使用 @extend 與循環結構生成多個類別
%base-card {
border-radius: 5px;
padding: 20px;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}

@for $i from 1 through 4 {
.card-#{$i} {
@extend %base-card; // 繼承基礎卡片樣式
background-color: lighten(blue, $i * 10%); // 動態調整背景顏色的亮度
}
}

• @for $i from 1 through 4 { ... }：使用 @for 循環來生成四個卡片類別

• @extend %base-card;：讓這四個卡片類別繼承 %base-card 的樣式

• 編譯後的CSS
  .card-1, .card-2, .card-3, .card-4 {
  border-radius: 5px;
  padding: 20px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
  }

.card-1 {
background-color: lighten(blue, 10%);
}

.card-2 {
background-color: lighten(blue, 20%);
}

.card-3 {
background-color: lighten(blue, 30%);
}

.card-4 {
background-color: lighten(blue, 40%);
}

• 就能使用 @extend 和循環結構高效地生成多個類別