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

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

以下に基づいて列クラスの動的リストを生成するのは、グリッド システムの一般的なシナリオです。指定された列数。 CSS の拡張である SCSS は、このようなシナリオに対する強力なソリューションを提供します。ただし、目的のクラスのカンマ区切りリストを実現するのは難しい場合があります。

カンマで区切られた列クラスの動的リストを作成するには、SCSS の強力な @extend ディレクティブを利用できます。その仕組みは次のとおりです:

1. 必要なスタイルを含むプレースホルダー クラスを定義します:

%float-styles {
  float: left;
}

2. @extend を使用してそれらのスタイルを適用するミックスインを作成します。生成された列クラス:

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

3. ミックスインを呼び出して列を生成します。 クラス:

@include col-x-list;

4. 必要な数の列を含む $columns を定義します。 :

$columns: 12;

このアプローチでは、目的の float スタイルを持つ列クラスのカンマ区切りのリスト。

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

@extend を使用すると、あるセレクターから別のセレクターにスタイルを効果的に適用でき、動的に生成された列のリストを実現できます。コードの重複が最小限に抑えられたクラス。

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