[解決済み] Sass .scss: ネストと複数クラス？

質問

現在のプロジェクトでSass（.scss）を使用しています。

以下の例です。

HTML

<div class="container desc">
    <div class="hello">
        Hello World
    </div>
</div>

SCSS

.container {
    background:red;
    color:white;

    .hello {
        padding-left:50px;
    }
}

これは素晴らしい機能です。

ネストされたスタイルを使用しながら、複数のクラスを扱うことはできますか？

上のサンプルでは、こんなことを言っています。

CSS

.container.desc {
    background:blue;
}

この場合、すべての div.container は通常 red しかし div.container.desc は青になります。

の中に入れ子にするにはどうすればよいですか？ container をSassで使用することはできますか？

どのように解決するのですか？

を使用することができます。 親セレクタ参照 & を指定すると、コンパイル後に親セレクタに置き換わります。

あなたの例では

.container {
    background:red;
    &.desc{
       background:blue;
    }
}

/* compiles to: */
.container {
    background: red;
}
.container.desc {
    background: blue;
}

は & は完全に解決されるので、親セレクタがネストしている場合は、ネストを解決してから & .

この表記は、次のような書き方で使われることが多いようです。 擬似要素および擬似クラス :

.element{
    &:hover{ ... }
    &:nth-child(1){ ... }
}

ただし & を事実上好きな位置に配置することができます。 ^* ということで、以下のようなことも可能です。

.container {
    background:red;
    #id &{
       background:blue;
    }
}

/* compiles to: */
.container {
    background: red;
}
#id .container {
    background: blue;
}

ただし、この方法では入れ子構造が崩れるため、スタイルシートで特定のルールを探す手間が増える可能性があることに注意してください。

*: の前に空白以外の文字を置くことはできません。 & . の直接連結はできません。 selector + & - #id& を実行するとエラーが発生します。