ホームページ >ウェブフロントエンド >CSSチュートリアル >SASSを使用したCSSクラスセレクターの構造化

SASSを使用したCSSクラスセレクターの構造化

Joseph Gordon-Levittオリジナル: 2025-02-24 10:01:09669ブラウズ

Structuring CSS Class Selectors with Sass

キーポイント

SASSにネストされるネイティブセレクターは、ドキュメントのルートレベルで元のブロック名からサブクラス名を作成し、コードを簡素化し、変数やミキシンなどの追加ヘルパーの必要性を減らすことができます。
BEM Mixinは、BEMの仕組みを理解したら理解しやすいフレンドリーなAPIを提供しますが、ロジックはMixinの背後に隠されています。
Humanified-BEM Mixinは、ブロックエレメントモジーの用語を隠すことでコードの読みやすさを向上させるように設計されていますが、これには一部の開発者にとって抽象化が多すぎる場合があります。

SASSを使用すると、

がこれらのセレクターをよりモジュール式の方法で記述するのに役立ちます。セレクターのネストとミックスを使用すると、必要なAPIを構築するために派手なソリューションを考え出すことができます。この記事では、これらの方法のいくつかを（再）紹介し、それぞれの長所と短所をリストします。

ネイティブセレクターネスト元のブロック名を繰り返すことなくセレクターをネストできることは、SASSの長期的な要件でした。 SASS 3.3では、この機能が最終的に導入されました。ベータ中、非常に奇妙な構文が最初に使用され、後に安定したバージョンがライブになったときにより良い構文に変更されました。 Natalie Weizenbaumは、この投稿の変更の背後にある理由を説明しています。基本的に、リファレンスセレクター（＆）をサブクラス名の一部として使用して、ドキュメントのルートレベル（つまり、 @at-Rootはここでは不要です）の最初のクラス名を持つ別のクラスを作成できます。

この機能は、非常に人気のあるメディアオブジェクトなど、BEMセレクターを書くためにすぐに使いすぎました。 前のコードは、次のようにコンパイルされます

pro

ネイティブ機能に依存しており、変数やミックスなどの追加のヘルパーは必要ありません。

<code>.foo {
  // .foo 的样式

  &-bar {
    // .foo-bar 的样式
  }
}</code>

参照セレクター（＆）がどのように機能するかを理解したら、全体的に習得するのは簡単です。

<code>.media {
  // .media 块的样式

  &__img {
    // .media__image 元素的样式

    &--full {
      // .media__image--full 修改后的元素的样式
    }
  }

  &--new {
    // .media--new 修饰符的样式
  }
}</code>

短所

<code>.media {}
.media__img {}
.media__img--full {}
.media--new {}</code>

Syntaxを公開します。これは、SASSに精通している開発者に馴染みがない場合、わずかに混乱し、恐ろしいことさえあります。

bem mixin

SASS 3.3のベータ中にクラスによって生成された構文は非常にugい（@at-Root＃{＆} __要素）、すぐに痛みを隠し、よりフレンドリーなAPIを提供するためにいくつかのミキシンを見ました。

<code>.foo {
  // .foo 的样式

  &-bar {
    // .foo-bar 的样式
  }
}</code>

次のように使用できます：

<code>.media {
  // .media 块的样式

  &__img {
    // .media__image 元素的样式

    &--full {
      // .media__image--full 修改后的元素的样式
    }
  }

  &--new {
    // .media--new 修饰符的样式
  }
}</code>

同じ方法でブロックミックスを作成することもできますが、ブロックは単なるクラス名であるため、ブロックほど役に立ちません。シンプルにしましょう。一部の人にとっては、修飾子と要素が長すぎるように見えますが、EとMは満開になっています。

<code>.media {}
.media__img {}
.media__img--full {}
.media--new {}</code>

pro

このバージョンは、BEMの仕組みを理解したら理解しやすいフレンドリーなAPIを提供します。

短所

ロジスティクスはMixinの後ろに隠されており、新しいセレクターとクラスを生成することは、何が起こっているのか正確にわからない限り、それほど明白ではありません。
単一の文字ミキシンは、ミキシンが使用されているものを理解することを困難にするため、良い考えではないかもしれません。 BとMは多くのことを表すことができます。

Humanified-bem Mixin

最近、アンダース・シュミット・ハンセンによる新しいBEMのようなアプローチを読みました。アイデアは、声を出して読むときに理にかなっている一般的な単語の背後にあるブロックエレメントモジュアファイアーの用語を隠すことです。

<code>@mixin element($element) {
  &__#{$element} {
    @content;
  }
}

@mixin modifier($modifier) {
  &--#{$modifier} {
    @content;
  }
}</code>

この場合、ポイントは、コードがストーリーを語っているように見えるように、名前が付いたミックスインの背後にあるコードを非表示にすることです。

<code>.media {
  // .media 块的样式

  @include element("image") {
    // .media__image 元素的样式

    @include modifier("full") {
      // .media__image--full 修改后的元素的样式
    }
  }

  @include modifier("new") {
    // .media--new 修饰符的样式
  }
}</code>

Andersはさらに使用します（..）と（..）Mixinを保持します。全体のアイデアは、その優れたコンテキストに応じて要素がスタイルを整えるときに、ユーザーフレンドリーなミックスインの後ろに隠れているときに、私のインスサイド（..）ミックスインを思い出させます。

<code>.media {
  // .media 块的样式

  @include e("image") {
    // .media__image 元素的样式

    @include m("full") {
      // .media__image--full 修改后的元素的样式
    }
  }

  @include m("new") {
    // .media--new 修饰符的样式
  }
}</code>

pro

短所

より安定した学習曲線を取得するために、より多くのミックスイン、より多くの補助ツール、および学習すべきことを学ぶべきもの。誰もが多くのミキシンに対処して、CSSセレクターのようなシンプルなものを書くのが好きなわけではありません。

これは、一部の人にとっては抽象的であるかもしれません。それは状況に依存します。

最終的な考え

これらの手法のいずれかを使用すると、SASSによって生成される前にセレクターが実際に存在しないため、セレクターコードベースが検索可能になるのを防ぐことを忘れないでください。セレクターがこの問題を解決する前にコメントを追加しますが、なぜセレクターを最初から書くだけではありませんか？

検索可能なコードベースを持っていることを気にする場合は、すべてのセレクター（.b {＆__ e {}}）に新しいSASS機能を使用しないでください。

- Kaelig（@kaelig）2014年3月12日

とにかく、友人、ここに私がSASSでCSSセレクターを書くために知っている最も人気のある方法があります。私とあなたの間で、私は彼らが好きではありません。そして、それは検索の問題のためだけでなく、私にとって大きな問題ではありません。

彼らが解決しようとしている問題を見ることができますが、時にはシンプルさは乾燥しています。ルートセレクターを繰り返すことは大したことではありません。コードは、ネストが少ないだけでなく、CSSに近いため、コードを読みやすくするだけではありません。

乾燥よりも単純な場合があります。

- Hugo Giraudel（@hugogiraudel）2015年5月19日

SASS構造化CSSクラスセレクターの使用に関する
FAQ

SASS構造化されたCSSクラスセレクターを使用することの意味は何ですか？
SASS構造化されたCSSクラスセレクターを使用することは、クリーンで順序付けられた効率的なスタイルシートを維持するために不可欠です。 SASS（Syntacly Awesome StyleSheetsに代わって）は、開発者が変数、ネストされたルール、ミキシン、および関数を使用してCSSをより動的で再利用できるようにするCSSプリプロセッサです。構造化されたクラスセレクターを使用すると、スタイルの階層を作成し、異なる要素とそのスタイルの関係を理解しやすくすることができます。これにより、CSSコードの保守性とスケーラビリティが大幅に向上する可能性があります。

SASSでワイルドカードセレクターを使用する方法は？
ユニバーサルセレクターとも呼ばれる
WildCardセレクターをSASSで使用して、特定のパターンに一致する要素を選択できます。たとえば、WildCardセレクター「*」を使用して、すべての要素を選択できます。ただし、SASSはワイルドカードのクラス名を直接サポートしていません。クラス名が特定の文字列で始まる要素を選択する場合は、属性セレクターを使用するなど、回避策を使用する必要があります。たとえば、セレクター
を使用して、クラス名が「prefix-」で始まるすべての要素を選択できます。 [class^="prefix-"]
sassのクラスセレクターで@extendディレクティブを使用できますか？

はい、@extendディレクティブは、クラスセレクターを使用したSASSで使用できます。 @extendディレクティブを使用すると、1つのセレクターが別のセレクターのスタイルを継承できます。これは、CSSコードの冗長性を減らすのに役立ちます。たとえば、同じスタイルの多くを共有する2つのクラスがある場合、これらのスタイルを1つのクラスで定義し、@extendディレクティブを使用してこれらのスタイルを別のクラスに適用できます。

SASSを使用してCSSコードをより効率的に整理する方法は？

SASSは、CSSコードをより効果的に整理するのに役立ついくつかの機能を提供します。機能の1つはネストであることです。これにより、HTML構造を反映して、他のセレクターにCSSセレクターをネストできます。これにより、CSSコードが読みやすくなり、メンテナンスを容易にすることができます。別の機能は変数です。これにより、再利用可能な値を定義できます。これは、色、フォント、間隔などのスタイルの一貫性を維持するのに役立ちます。

SASS構造化されたCSSクラスセレクターを使用するためのベストプラクティスは何ですか？

SASS構造CSSクラスセレクターを使用するためのいくつかのベストプラクティスがあります。ベストプラクティスの1つは、セレクターを可能な限り具体的にすることです。これは、スタイルが他の要素に誤って影響を与えるのを防ぐのに役立ちます。もう1つのベストプラクティスは、意味のあるクラス名を使用して要素の目的または機能を説明することです。これにより、CSSコードが読みやすくなり、メンテナンスを容易にすることができます。さらに、BEM（ブロック、要素、修飾子）など、クラスに一貫した命名規則を使用して、異なるクラス間の関係を理解しやすくすることをお勧めします。

SASSのMixinを使用してCSSコードを再利用する方法は？
SASSのミックスインは、スタイルシート全体で再利用できるスタイルを定義する方法です。 Mixinは、@mixinディレクティブを使用して定義され、その後に名前とCSSコードブロックが続きます。その後、@includeディレクティブ（Mixinの名前で提出された）を使用して、任意のセレクターにMixinを含めることができます。これは、CSSコードの冗長性を削減し、維持を容易にするのに役立ちます。

SASSの関数を使用してCSSコードを生成できますか？

はい、SASSは関数をサポートし、CSSコードを生成するために使用できます。 SASSの関数は、@Functionディレクティブに続いて名前とコードブロックを使用して定義されます。この関数は、パラメーターを受け入れ、CSSコードで使用できる値を返すことができます。これは、特定の条件または計算に依存する複雑なスタイルを作成するのに役立ちます。

SASSの@Importディレクティブを使用してCSSコードを整理する方法は？
SASSの@Importディレクティブを使用して、他のSASSファイルをSASSファイルにインポートすることができます。これは、CSSコードを個別のファイルに整理するのに役立ち、それぞれがWebサイトスタイルの特定の部分に焦点を当てています。たとえば、ヘッダースタイル、フッタースタイル、メインコンテンツスタイル用に個別のSASSファイルを作成し、それらをすべてメインSASSファイルにインポートできます。

SASSの親セレクターを参照してオペレーターを使用する方法は？
SASSの＆オペレーターを使用して、ネストされたルールで親セレクターを参照できます。これは、擬似クラスまたは擬似要素のセレクターを作成するのに非常に役立ちます。たとえば、.linkルール内のホバーのネストされたルールがある場合、＆operatorを使用してセレクター.link：Hoverを作成できます。

SASSの@mediaディレクティブを使用してレスポンシブスタイルを作成する方法は？

SASSの@Mediaディレクティブを使用してメディアクエリを作成し、幅や高さなどのページを表示しているデバイスの特性に基づいてさまざまなスタイルを適用できます。これは、さまざまな画面サイズに合うレスポンシブなデザインを作成するのに非常に役立ちます。メディアクエリ基準が満たされている場合にのみ、セレクターの@mediaディレクティブを使用してスタイルを適用できます。

以上がSASSを使用したCSSクラスセレクターの構造化の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

css html sass 运算符子类 include 字符串预处理器继承 class function 对象选择器样式表伪类伪元素

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：SCSS-LINTを開始します次の記事：SCSS-LINTを開始します

続きを見る