ホームページ > ウェブフロントエンド > CSSチュートリアル > SCSS でカンマ区切りの列クラスを動的に生成するにはどうすればよいですか?

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

Susan Sarandon
リリース: 2024-12-07 22:01:16
オリジナル
341 人が閲覧しました

How to Dynamically Generate Comma-Separated Column Classes in SCSS?

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

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

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

  1. 必要なスタイルを含むプレースホルダー クラスを定義します:
%float-styles {
  float: left;
}
ログイン後にコピー
  1. @extend を使用してそれらのスタイルを適用するミックスインを作成します。生成された列クラス:
@mixin col-x-list {
  @for $i from 1 through $columns {
      .col-#{$i}-m { @extend %float-styles; }
  }
}
ログイン後にコピー
  1. ミックスインを呼び出して列を生成します。 クラス:
@include col-x-list;
ログイン後にコピー
  1. 必要な数の列を含む $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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート