Sass .scss: Verschachtelung und mehrere Klassen?

Ich verwende 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 super.

Kann ich mehrere Klassen verarbeiten, während ich verschachtelte Stile verwende?

Im obigen Beispiel spreche ich darüber:

CSS

.container.desc {
    background:blue;
}

In diesem Fall werden alle div.containerwürden normalerweise redaber div.container.descwäre blau.

Wie kann ich das containermit Sass verschachteln ?

Sie können die übergeordnete Auswahlreferenz verwenden & . Sie wird nach der Kompilierung durch die übergeordnete Auswahl ersetzt:

Für Ihr Beispiel:

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

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

Das &wird vollständig aufgelöst. Wenn Ihr übergeordneter Selektor selbst verschachtelt ist, wird die Verschachtelung aufgelöst, bevor das ersetzt wird &.

Diese Notation wird am häufigsten zum Schreiben von Pseudoelementen und -klassen verwendet :

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

Sie können das &Gerät jedoch an praktisch jeder beliebigen Position platzieren ^* , sodass auch Folgendes möglich ist:

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

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

Beachten Sie jedoch, dass dies Ihre Verschachtelungsstruktur irgendwie zerstört und somit den Aufwand für das Auffinden einer bestimmten Regel in Ihrem Stylesheet erhöhen kann.

*: Vor dem dürfen keine anderen Zeichen als Leerzeichen verwendet werden &. Sie können also keine direkte Verkettung von selector+ &- durchführen, da #id&dies einen Fehler auslösen würde.

Wenn dies der Fall ist, müssen Sie meiner Meinung nach eine bessere Methode zum Erstellen eines Klassennamens oder einer Klassennamenkonvention verwenden. Wie Sie bereits sagten, soll die .containerKlasse je nach Verwendung oder Erscheinungsbild eine andere Farbe haben. Du kannst das:

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;
}

Der obige Code basiert auf der BEM-Methodik in Klassennamenskonventionen. Sie können diesen Link überprüfen: BEM - Block Element Modifier Methodology

Christophs Antwort ist perfekt. Manchmal möchten Sie jedoch möglicherweise mehr als eine Klasse aufsteigen. In diesem Fall könnten Sie die Funktionen @at-rootund #{}css ausprobieren, mit denen zwei Stammklassen mithilfe von nebeneinander sitzen können &.

Dies würde (aufgrund der nothing before &Regel) nicht funktionieren :

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

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

Aber das würde (mit @at-root plus #{&}):

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

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