Sass .scss: Verschachtelung und mehrere Klassen?

Question

Ich bin mit Sass (.scss) für mein aktuelles Projekt.

Folgendes Beispiel:

HTML

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

SCSS

.container {
    background:red;
    color:white;

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

Das funktioniert hervorragend.

Kann ich mit mehreren Klassen umgehen und dabei verschachtelte Stile verwenden?

In dem obigen Beispiel geht es um Folgendes:

CSS

.container.desc {
    background:blue;
}

In diesem Fall sind alle div.container wäre normalerweise red sondern div.container.desc blau sein würde.

Wie kann ich das im Inneren verschachteln? container mit Sass?

Answer 1

Das hat bei mir funktioniert

<div class="container">
  <div class="desc">
    desc
  </div>
  <div class="asc">
    asc
  </div>
</div>

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