Sass .scss: Verschachtelung und mehrere Klassen?

332

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 ?

matt
quelle
1
Sie sollten einen Doppelklassen-Selektor verwenden. Dieses Problem ist ein perfektes Beispiel für eine Verschachtelungsoption in Sass. Sie können alles darüber hier lesen kolosek.com/nesting-in-less-and-sass
Nesha Zoric

Antworten:

569

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.

Christoph
quelle
12
Nur eine Randnotiz, eine häufige Verwendung &ist die Verwendung von Pseudoelementen und Pseudoklassen. Zum Beispiel : &:hover.
Crush
1
@crush Der Vollständigkeit halber habe ich dies meiner Antwort hinzugefügt. Danke für den Kommentar.
Christoph
1
Vielen Dank. Ich dachte, ich wäre dumm, da es im Basics Guide nicht erwähnt wird! Übrigens hat die Dokumentation die URL verschoben zu: sass-lang.com/documentation/…
scipilot
1
Wenn &es am Ende einer Zeile verwendet wird, wird diese Zeile auf allen anderen Ebenen am Anfang der restlichen Klassen platziert. Sie können Elemente kombinieren, indem Sie &.descunter .containerausführen, was .desc anhängen würde, was zu.container.desc
Kate Miller
scss-lint schlägt vor, "& :: hover" (Doppelkolone) zu verwenden
Marcel Lange
18

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

Murdock Helscream
quelle
Beachten Sie, dass dies gut klingt, aber auf jeden Fall vermieden werden sollte. Sie werden mir in Zukunft danken, wenn Sie versuchen, Ihr Projekt zu durchsuchen, .container--descund am Ende keine Ergebnisse erzielen.
Stavm
1

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

user2299879
quelle