☰

Sass .scss: ネストと複数のクラス? 質問する

tag-icon • tag-icon sass
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;
    }
}

これはとてもうまくいきます。

ネストされたスタイルを使用しながら複数のクラスを処理できますか。

上記のサンプルでは、​​次のことを言っています。

CS

.container.desc {
    background:blue;
}

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

これをcontainerSass 内でネストするにはどうすればよいでしょうか?

ベストアンサー1

あなたは親セレクタ参照 &コンパイル後に親セレクターに置き換えられます。

たとえば:

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

おすすめ記事