SCSS で CSS クラスのカンマ区切りリストを動的に生成するにはどうすればよいですか?

カンマ区切りで動的クラス リストを作成する

カンマで区切ってクラスのリストを動的に作成する機能は、CSS で重要な役割を果たします。特にレスポンシブ レイアウトを構築する場合は、SCSS と SCSS を考慮してください。

SCSS グリッド システムの場合: $columns を変数として使用して、列数を決定する動的グリッド システムを作成したいとします。 @mixin Col-x を使用して個々のクラス幅を生成することは効果的に機能しますが、これらのクラスのカンマ区切りリストを作成しようとすると課題が発生します。

ロジックの問題の解決

SCSS の

@extend は、この課題に対する解決策を提供します。目的のスタイル (float: left) を含むプレースホルダー %float-styles を含む、col-x-list という新しいミックスインを定義することで、@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;
}

Referenceマテリアル

[SCSS @extend ドキュメント](https://sass-lang.com/documentation/at-rules/extend)
• [SCSS @mixin ドキュメント] (https://sass-lang.com/documentation/at-rules/mixin)

以上がSCSS で CSS クラスのカンマ区切りリストを動的に生成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。