如何在 SCSS 中動態產生以逗號分隔的 CSS 類別清單？

建立以逗號分隔的動態類別清單

動態建立以逗號分隔的類別清單的能力在CSS 中起著至關重要的作用和SCSS，特別是在建立響應式佈局時。

考慮 SCSS 網格系統的情況：您想要使用 $columns 作為變數來建立動態網格系統來決定列數。雖然使用 @mixin col-x 產生單一類別寬度可以有效地工作，但在嘗試建立這些類別的逗號分隔清單時會出現挑戰。

解決邏輯問題

SCSS 中的 @extend 提供了應對這一挑戰的解決方案。透過定義一個名為 col-x-list 的新 mixin，其中包含一個包含所需樣式（float: left）的佔位符 %float-styles，您可以使用 @extend:

$columns: 12;

%float-styles {
  float: left;
}

@mixin col-x-list {
  @for $i from 1 through $columns {
      .col-#{$i}-m { @extend %float-styles; }
  }
}

@include col-x-list;

此方法產生具有指定樣式的以逗號分隔的類別列表：

.col-1-m, .col-2-m, .col-3-m, .col-4-m, .col-5-m, .col-6-m, .col-7-m, .col-8-m, .col-9-m, .col-10-m, .col-11-m, .col-12-m {
  float: left;
}

參考材料

[SCSS @extend文件](https://sass-lang.com/documentation/at-rules/extend)
• [SCSS @mixin 文件] (https://sass-lang.com/documentation/at-rules/ mixin)

以上是如何在 SCSS 中動態產生以逗號分隔的 CSS 類別清單？的詳細內容。更多資訊請關注PHP中文網其他相關文章！