一、映射與列表的用途

列表 (Lists) 和 映射 (Maps) 是 SCSS 中常用的資料結構，能幫助我們更有效地管理和組織樣式資料。

列表 (Lists)：類似於陣列，是一組有序的資料集合，常用於需要處理多個值時，例如設定多個顏色、尺寸、字體等。
映射 (Maps)：類似於物件，是一組鍵值對的集合，能更有組織地儲存資料，適用於管理更複雜的樣式設定，例如主題設定或色彩對應

二、 高效使用列表的範例

假設我們需要建立多個按鈕顏色樣式，可以使用列表來簡化設定：

// 定義按鈕顏色列表
$button-colors: blue, green, red;

@each $color in $button-colors {
  .btn-#{$color} {
    background-color: $color;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    margin: 5px;
  }
}

三、高效使用映射的範例

映射提供更具彈性的資料結構，讓我們可以輕鬆定義多種樣式屬性。例如，我們可以使用映射來設計不同按鈕狀態的樣式：

// 定義按鈕狀態映射
$button-states: (
  primary: #3498db,
  success: #2ecc71,
  danger: #e74c3c
);

@each $state, $color in $button-states {
  .btn-#{$state} {
    background-color: $color;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    margin: 5px;
    
    &:hover {
      background-color: darken($color, 10%);
    }
  }
}

使用列表和映射可以有效地減少重複性代碼，讓樣式更具彈性與可維護性。在專案中，此方法能大幅簡化樣式管理，尤其當面臨大量變化或需要維持一致性時，映射與列表的結合運用會讓開發流程更高效!!
堅持就是勝利!!~