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

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

SASS では、動的で構成可能なグリッド システムを作成するのが難しい場合があります。そのような障害の 1 つは、定義された列の数に基づいてカンマ区切りの列クラスのリストを動的に生成することです。

これを実現するには、@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;

この SCSS コードは次のことを実行します:

• 変数 $columns を定義して列数を指定します。
• プレースホルダー スタイルを作成します。列に必要なプロパティを定義するシート ルール %float-styles
• @mixincol-x-list を利用して各列をループし、定義されたスタイルをそれに適用します。
• 必要なリストを生成するために、col-x-list mixin が含まれています。

このアプローチでは、次のような 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;
}

この出力グリッド システムに適用できる、動的に生成されたカンマ区切りの列クラスのリストが提供されます。

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