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

その場合は、クラス名またはクラス名の規則を作成するより良い方法を使用する必要があると思います。たとえば、あなたが言ったように、あなたは.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 —ブロック要素修飾子の方法論

クリストフの答えは完璧です。ただし、1つよりも多くのクラスに行きたい場合もあります。この場合、@at-rootおよび#{}を使用して、2つのルートクラスをを使用して互いに隣接させることができ&ます。

これは機能しません（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;
    }
}