1. 動態生成類名
   $size-list: small, medium, large; // 定義一個尺寸的列表

@each $size in $size-list {
.icon-#{$size} {
width: if($size == small, 16px, if($size == medium, 32px, 64px)); // 根據尺寸設置寬度
height: auto;
}
}

• 使用 @each 迴圈，遍歷 $size-list 中的每個尺寸，將當前尺寸賦值給 $size

• 使用插值 #{$size}，將當前的 $size 變數值嵌入到類名中，生成 .icon-small、.icon-medium、.icon-large

• 使用三元條件運算符 if，根據 $size 的值設置不同的寬度

• 編譯後
  .icon-small {
  width: 16px;
  height: auto;
  }

.icon-medium {
width: 32px;
height: auto;
}

.icon-large {
width: 64px;
height: auto;
}

2. 動態生成屬性值
   $colors: (primary: #3498db, success: #2ecc71, danger: #e74c3c); // 定義一個顏色地圖

@each $name, $color in $colors {
.btn-#{$name} {
background-color: $color;
border: 1px solid darken($color, 10%); // 邊框色為背景色的加深 10%
color: #fff;

&:hover {
  background-color: lighten($color, 10%); // 懸停時背景色變亮 10%
}

}
}

• 使用 @each 迴圈，遍歷 $colors 地圖，將鍵賦值給 $name，值賦值給 $color

• 使用插值 #{$name}，將 $name 嵌入到類名中，生成 .btn-primary、.btn-success、.btn-danger

• 使用父選擇器 &，當按鈕處於懸停狀態時，將背景色變亮 10%

• 編譯後
  .btn-primary {
  background-color: #3498db;
  border: 1px solid #2a7ab9;
  color: #fff;
  }

.btn-primary:hover {
background-color: #5dade2;
}

.btn-success {
background-color: #2ecc71;
border: 1px solid #26a65b;
color: #fff;
}

.btn-success:hover {
background-color: #58d68d;
}

.btn-danger {
background-color: #e74c3c;
border: 1px solid #c0392b;
color: #fff;
}

.btn-danger:hover {
background-color: #ec7063;
}

3. 動態生成屬性名
   @mixin set-font($property, $size) {
   font-#{$property}: $size; // 動態生成屬性名，如 font-size, font-weight
   }

.title {
@include set-font("size", 24px); // 生成 font-size: 24px;
@include set-font("weight", bold); // 生成 font-weight: bold;
}

• 使用插值將 $property 嵌入到屬性名中，動態生成 font-size 或 font-weight 等屬性

• 調用 set-font 混合器，生成 font-size: 24px;

• 調用 set-font 混合器，生成 font-weight: bold;

• 編譯後
  .title {
  font-size: 24px;
  font-weight: bold;
  }

4. 生成響應式間距類
   $spacings: 5, 10, 15, 20; // 定義間距數值列表

@each $spacing in $spacings {
.mt-#{$spacing} {
margin-top: #{$spacing}px; // 動態生成屬性值
}

.mb-#{$spacing} {
margin-bottom: #{$spacing}px;
}

.ml-#{$spacing} {
margin-left: #{$spacing}px;
}

.mr-#{$spacing} {
margin-right: #{$spacing}px;
}
}

• 使用 @each 迴圈，遍歷 $spacings 列表，將當前值賦給 $spacing

• 使用插值生成類名 .mt-5、.mt-10 等，並動態設置 margin-top 的值

• 編譯後
  .mt-5 {
  margin-top: 5px;
  }

.mb-5 {
margin-bottom: 5px;
}

.ml-5 {
margin-left: 5px;
}

.mr-5 {
margin-right: 5px;
}
/* ... 其他間距值的類名和樣式 */

5. 生成響應式字體大小
   $font-sizes: (
   small: 12px,
   medium: 16px,
   large: 20px,
   xlarge: 24px
   ); // 定義字體大小的地圖

@each $name, $size in $font-sizes {
.text-#{$name} {
font-size: $size;
}
}

• 使用 @each 迴圈，遍歷 $font-sizes 地圖，將鍵賦值給 $name，值賦值給 $size

• 使用插值生成類名，如 .text-small、.text-medium，並設置對應的 font-size

• 編譯後
  .text-small {
  font-size: 12px;
  }

.text-medium {
font-size: 16px;
}

.text-large {
font-size: 20px;
}

.text-xlarge {
font-size: 24px;
}