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

在SCSS 中動態產生逗號分隔的類別列表

在SCSS 中建立動態網格系統通常需要產生分隔的列類列表以逗號分隔。這簡化了不同列數中常見樣式的應用。然而，編寫這樣的程式碼可能具有挑戰性。

動態列建立

提供的 SCSS 程式碼成功基於變數 $columns 建立列類別。但是，產生這些類別的逗號分隔清單仍然是一個障礙。

使用 @extend

不要為每個欄位建立單獨的類別定義，請考慮使用 @擴充指令。定義擴充功能預先定義浮動樣式的mixin，您可以實現所需的效果：

在此程式碼中：

• %float-styles 佔位符定義樣式待擴展。
• @mixin col-x-list 建立下列清單類別。
• @for 迴圈迭代列號。
• 每個類別都擴展 %float-styles，繼承其 float 屬性。

結果CSS

使用此方法產生的CSS 將類似於以下：

這提供了一個以逗號分隔的類別列表，這些類別從%float-styles 佔位符繼承float 屬性。透過利用@extend，您可以簡化程式碼，同時保持所需的功能。

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