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

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

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

pro

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

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

參照セレクター（＆）がどのように機(jī)能するかを理解したら、全體的に習(xí)得するのは簡単です。

<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に精通している開発者に馴染みがない場合、わずかに混亂し、恐ろしいことさえあります。

ネストは通常??、 @at-Rootが使用されない限り、ルートディレクトリに印刷されません。これは邪魔になる可能性があります。
• bem mixin

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

<code>.media {
  // .media 塊的樣式

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

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

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

このアプローチは、主要なIS-（SMACSSによって推進(jìn)された）を使用して州のクラスの名前を挙げ始めたように、コードの読みやすさを改善するのに役立ちます。
特定のアプローチ（この場合はBEM）に固執(zhí)していますが、開発者が使いやすくなります。

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

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

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

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

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

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

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

SASS構(gòu)造化CSSクラスセレクターの使用に関する

FAQ

SASS構(gòu)造化されたCSSクラスセレクターを使用することの意味は何ですか？

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

SASSでワイルドカードセレクターを使用する方法は？

ユニバーサルセレクターとも呼ばれる

WildCardセレクターをSASSで使用して、特定のパターンに一致する要素を選択できます。たとえば、WildCardセレクター「*」を使用して、すべての要素を選択できます。ただし、SASSはワイルドカードのクラス名を直接サポートしていません。クラス名が特定の文字列で始まる要素を選択する場合は、屬性セレクターを使用するなど、回避策を使用する必要があります。たとえば、セレクター

を使用して、クラス名が「prefix-」で始まるすべての要素を選択できます。 [class^="prefix-"]

sassのクラスセレクターで@extendディレクティブを使用できますか？

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

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

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

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

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

SASSのMixinを使用してCSSコードを再利用する方法は？

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

SASSの関數(shù)を使用してCSSコードを生成できますか？

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

SASSの@Importディレクティブを使用してCSSコードを整理する方法は？

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

SASSの親セレクターを參照してオペレーターを使用する方法は？

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

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

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