web-dev-qa-db-ja.com

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は青です。

Sassでこれをcontainerの中に入れ子にするにはどうすればいいですか？

sass
273
matt

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

あなたの例では：

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

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

&は完全に解決されるので、あなたの親セレクタがそれ自身でネストされている場合、&を置き換える前にネストが解決されます。

この表記法は、ほとんどの場合、 擬似要素と-classes を書くために使用されます。

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

ただし、&は、好きな場所に配置できます。*したがって、次のことも可能です。

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

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

ただし、これはどういうわけかあなたのネスト構造を壊し、したがってあなたのスタイルシートの中で特定の規則を見つける手間を増やすかもしれないことに注意してください。

*：&の前に空白以外の文字を入れることはできません。そのため、selector + & - #id&を直接連結することはできません。エラーが発生します。

493
Christoph

その場合は、クラス名またはクラス名規則を作成するためのより良い方法を使用する必要があると思います。たとえば、.containerクラスは、特定の使用法や外観に応じて異なる色にしたいとおっしゃいました。あなたはこれを行うことができます：

SCSS

.container {
  background: red;

  &--desc {
    background: blue;
  }

  // or you can do a more specific name
  &--blue {
    background: blue;
  }

  &--red {
    background: red;
  }
}

CSS

.container {
  background: red;
}

.container--desc {
  background: blue;
}

.container--blue {
  background: blue;
}

.container--red {
  background: red;
}

上記のコードはクラス命名規則のBEM方法論に基づいています。あなたはこのリンクをチェックすることができます： BEM - ブロック要素修飾子方法論

9
Murdock Helscream