グリッド システム用の SCSS でカンマ区切りのクラス リストを動的に生成するにはどうすればよいですか?

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

SCSS では、グリッド システムを動的に構築するのは、特に生成する場合に困難になることがあります。列クラスのカンマ区切りのリスト。この障害を克服するには、@extend の概念が鍵となります。

開始するには、col-x-list という名前のミックスインを定義し、@for ループを利用して必要な数の列を反復処理します。このループ内で、%float-styles などのミックスインを利用してスタイルを制御する各列のクラス ルールを作成します。 @extend を使用して %float-styles ミックスインを継承し、クラスがそのプロパティを共有できるようにします。

たとえば、次のコードを考えてみましょう。

$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;

このコードは次の 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;
}

@extend を利用すると、カンマ区切りのクラス リストを動的に生成できます。 SCSS で動的グリッド システムを作成する際の柔軟性と効率が向上します。

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