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

Sie können die Referenz des übergeordneten Selektors & wird er nach der Kompilierung durch den übergeordneten Selektor ersetzt:

Für Ihr Beispiel:

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

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

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

Diese Notation wird am häufigsten verwendet, um Folgendes zu schreiben Pseudo-Elemente und -Klassen :

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

Sie können jedoch die & an praktisch jeder beliebigen Stelle * so ist auch das Folgende möglich:

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

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

Seien Sie sich jedoch bewusst, dass dies Ihre Verschachtelungsstruktur durchbricht und somit den Aufwand für das Auffinden einer bestimmten Regel in Ihrem Stylesheet erhöhen kann.

*: Keine anderen Zeichen als Leerzeichen sind vor dem & . Sie können also nicht direkt eine Verkettung von selector + & - #id& würde einen Fehler auslösen.

Answer 2

Wenn das der Fall ist, sollten Sie eine bessere Methode zur Erstellung eines Klassennamens oder eine Klassennamenskonvention verwenden. Zum Beispiel, wie Sie sagten, Sie wollen die .container Klasse je nach Verwendungszweck oder Aussehen eine andere Farbe haben. Sie können dies tun:

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 Bezug auf die Namenskonventionen für Klassen. Sie können diesen Link überprüfen: BEM-Block Element Modifier Methodik

Answer 3

Die Antwort von Christoph ist perfekt. Manchmal möchte man aber vielleicht mehr als eine Klasse höher gehen. In diesem Fall könnten Sie versuchen, die @at-root y #{} css-Funktionen, die es ermöglichen würden, zwei Root-Klassen nebeneinander zu platzieren, indem & .

Das würde nicht funktionieren (wegen der nothing before & Regel):

container {
    background:red;
    color:white;

    .desc& {
      background: blue;
    }

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

Dies würde jedoch (unter Verwendung von @at-root plus #{&} ):

container {
    background:red;
    color:white;

    @at-root .desc#{&} {
      background: blue;
    }

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

Answer 4

Utilice &

SCSS

.container {
    background:red;
    color:white;

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

https://sass-lang.com/documentation/style-rules/parent-selector

Answer 5

Zusätzlich zu Cristophs Antwort können Sie, wenn Sie in Ihrer Deklaration spezifischer sein wollen, auf alle Kinder einer Containerklassenkomponente verweisen. Dies kann mit getan werden:

.container {
// ...
  #{&}.hello {
     padding-left: 50px;
  }
}

Dies ergibt sich aus:

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

Ich hoffe, dass dies hilfreich für Sie ist!