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

SCSS でクラスのカンマ区切りリストを動的に生成する

SCSS で動的グリッド システムを作成するには、多くの場合、分割された列クラスのリストを生成する必要があります。カンマで区切ります。これにより、さまざまな列数に共通のスタイルを適用することが簡単になります。ただし、このようなコードの作成は困難な場合があります。

動的列の作成

提供された SCSS コードは、変数 $columns に基づいて列クラスを正常に作成します。ただし、これらのクラスのカンマ区切りのリストを生成することは依然としてハードルです。

@extend の使用

列ごとに個別のクラス定義を作成する代わりに、@ の使用を検討してください。ディレクティブを拡張します。事前定義された float スタイルを拡張するミックスインを定義することで、目的の効果を実現できます。

%float-styles {
  float: left;
}

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

このコード内:

• %float-styles プレースホルダーはスタイルを定義します。
• @mixincol-x-list は次のリストを作成します。
• @for ループは列番号を反復処理します。
• 各クラスは %float スタイルを拡張し、float プロパティを継承します。

結果CSS

このアプローチを使用して生成された CSS は、次のようになります。以下:

.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;
}

これは、%float-styles プレースホルダーから float プロパティを継承するクラスのカンマ区切りのリストを提供します。 @extend を活用すると、必要な機能を維持しながらコードを簡素化できます。

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