418

現在のプロジェクトで 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でネストするにはどうすればよいですか?

4

6 に答える 6

700

親セレクタ参照 を使用できます&。コンパイル後に親セレクタに置き換えられます。

あなたの例：

.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&エラーがスローされます。

于 2012-06-18T14:18:41.247 に答える
4

クリストフの答えは完璧です。ただし、場合によっては、1 つ以上のクラスに移動したい場合があります。この場合、を使用して 2 つのルート クラスを隣り合わせに配置できるようにする@at-rootおよびcss 機能を試すことができます。#{}&

これは機能しません (nothing before &ルールにより):

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

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

しかし、これは（を使用して@at-root plus #{&}）：

container {
    background:red;
    color:white;
    
    @at-root .desc#{&} {
      background: blue;
    }

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

于 2019-12-26T19:49:28.763 に答える
1

使用する&

SCSS

.container {
    background:red;
    color:white;

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

https://sass-lang.com/documentation/style-rules/parent-selector

于 2020-10-20T15:00:10.247 に答える