sass
Verschachtelung

Grundlegende Verschachtelung

Immer wenn Sie eine neue Regel innerhalb einer anderen Regel deklarieren, wird sie als Verschachtelung bezeichnet. Bei der einfachen Verschachtelung wird, wie unten gezeigt, der verschachtelte Selektor als neuer CSS-Selektor mit allen vorangestellten übergeordneten Elementen erstellt, die durch ein Leerzeichen getrennt sind.

// SCSS
.parent {
  margin: 1rem;

  .child {
    float: left;
  }
}

// CSS output
.parent {
  margin: 1rem;
}

.parent .child {
  float: left;
}

Schachtelungstiefe

Verschachtelung ist eine sehr leistungsfähige Funktion, sollte jedoch mit Vorsicht verwendet werden. Es kann ziemlich leicht und schnell passieren, dass Sie mit dem Schachteln beginnen und alle Kinder in ein Nest, ein Nest oder ein Nest einschließen. Lass mich demonstrieren:

// SCSS
header {
  // [css-rules]

  .holder {
    // [css-rules]

    .dropdown-list {
      // [css-rules]

      ul {
        // [css-rules]

        li {
          margin: 1rem 0 0 1rem;
        }
      }
    }
  }
}

// CSS output of the last rule
header .holder .dropdown-list ul li {
  margin: 1rem 0 0 1rem;
}

Probleme

Besonderheit

Das li aus dem obigen Beispiel hat eine margin . Nehmen wir an, wir wollen das später in einer Media-Abfrage überschreiben.

@media (max-width: 480) {

  // will not work
  .dropdown-list ul li {
    margin: 0;
  }

  // will work
  header .holder .dropdown-list ul li {
    margin: 0;
  }
}

Wenn Sie also zu tief schachteln, müssen Sie immer wieder tief schachteln, wenn Sie einen bestimmten Wert überschreiben möchten. Noch schlimmer ist , ist dies oft , wo die Regel !important zu verwenden kommt.

@media (max-width: 480) {

  // BIG NO-NO, don't do this
  .dropdown-list ul li {
    margin: 0 !important;
  }

Warum ist die !important Regel eine schlechte Idee?

Sie sollten Ihren SCSS so schreiben, dass diese Problemumgehungen gar nicht erst erforderlich sind. Wenn Sie !important ein so kleines Problem bereits verwenden, führen Sie ein Kaninchenloch hinunter!

Wiederverwendbarkeit

Dies ist dem Spezifitätsproblem ziemlich ähnlich, aber es lohnt sich, gesondert darauf hinzuweisen. Wenn Sie so etwas wie eine Schaltfläche oder sogar ein Dropdown-Menü gestalten, möchten Sie diese möglicherweise an anderer Stelle auf Ihrer Seite verwenden.

Wenn Sie zu tief verschachteln, sind Ihre Stile nur an die Elemente gebunden, die sich im äußersten übergeordneten Element (dem Element oben in Ihrem SCSS) befinden. Dies führt dazu, dass Sie Stile kopieren und erneut an anderer Stelle einfügen. Möglicherweise in einer anderen verschachtelten Regel.

Ihre Stylesheets werden immer größer und sind schwieriger zu warten.

Wie tief sollst du nisten?

Die meisten Styleguides legen die maximale Tiefe auf 2 fest. Dies ist im Allgemeinen ein guter Ratschlag, da es nur sehr wenige Gelegenheiten gibt, bei denen Sie tiefer nisten möchten. Meistens ist 2 genug.

Verschachtelung mit @ at-root

Die Verschachtelung wird wahrscheinlich am häufigsten verwendet, um spezifischere Selektoren zu erstellen, sie kann jedoch auch einfach für die Codeorganisation verwendet werden. Mit der @at-root Direktive können Sie aus dem Bereich springen, in dem Sie ihn in Ihrem Sass verschachteln, und Sie auf die oberste Ebene zurückbringen. Auf diese Weise können Sie Stile gruppieren, ohne mehr Spezifität zu schaffen, als Sie benötigen.

Zum Beispiel könnte man so etwas sagen:

.item {
    color: #333;

    @at-root {
        .item-wrapper {
            color: #666;

            img {
                width: 100%;
            }
        }
    }
    
    .item-child {
        background-color: #555;
    }
}

Das würde dazu kompilieren:

.item {
  color: #333;
}
.item-wrapper {
  color: #666;
}
.item-wrapper img {
  width: 100%;
}
.item .item-child {
  background-color: #555;
}

Dadurch sind alle unsere Stile, die sich auf die .item Klasse beziehen, im SCSS zusammengefasst, aber wir brauchen diese Klasse nicht unbedingt in jedem Selektor.

Kontexte ausschließen

Standardmäßig werden Deklarationen in @at-root in jedem Kontext angezeigt. Das bedeutet, dass zum Beispiel Regeln in einem @media Block dort bleiben.

@media print {
  .item-wrapper {
    @at-root {
      .item {
        background: white;
      }
    }
  }
}

// Will compile to
@media print {
  .item {
    background: white;
  }
}

Dies ist nicht immer Verhalten gewünscht, so können Sie den Medienkontext ausschließen können, indem media auf die die without Möglichkeit des @at-root - Richtlinie.

@at-root (without: media) {..

Weitere Informationen finden Sie in der offiziellen Dokumentation

Die übergeordnete Auswahl (&)

Durch das Schachteln können verwandte Selektoren zusammengehalten werden, um zukünftigen Entwicklern das Verständnis des Codes zu erleichtern. Die übergeordnete Auswahl, dargestellt durch ein kaufmännisches Und ("&"), kann dies in komplexeren Situationen unterstützen. Es gibt mehrere Möglichkeiten, wie es verwendet werden kann.

Erstellen Sie einen neuen Selektor, für den sowohl der übergeordnete Selektor als auch ein anderer für dasselbe Element erforderlich ist, indem Sie den neuen Selektor direkt hinter einem übergeordneten Selektor platzieren.

// SCSS
.parent {

  &.skin {
    background: pink;
  }
}

// CSS output
.parent.skin {
  background: pink;
}

Lassen Sie das übergeordnete Element nach einem verschachtelten Selektor im kompilierten CSS erscheinen, indem Sie den übergeordneten Selektor nach dem verschachtelten Selektor platzieren.

// SCSS
.parent {

  .wrapper & {
    border: 1px solid black;
  }
}

// CSS output
.wrapper .parent {
  border: 1px solid black;
}

Zustände und Pseudoelemente

Neben der Verwendung der Verschachtelung für Klassen und Kinder wird die Verschachtelung mit der übergeordneten Auswahl auch häufig verwendet, um die Zustände von :active :hover und :focus für Verknüpfungen zu kombinieren.

// SCSS
a {
  color: blue;

  &:active,
  &:focus {
    color: red;
  }

  &:visited {
    color: purple;
  }
}

// CSS output
a {
  color: blue;
}

a:active,
a:focus {
  color: red;
}

a:visited {
  color: purple;
}

Auf ähnliche Weise können Sie Pseudoelemente gestalten, indem Sie sie mit dem übergeordneten Selektor verschachteln.

// SCSS
.parent {

  &::after {
    display: table;
    clear: both;
    content: '';
  }

  &::only-child {
    font-weight: bold;
  }
}

// CSS output
.parent::after {
  display: table;
  clear: both;
  content: '';
}

.parent::only-child {
  font-weight: bold;
}

Schachtelungseigenschaften

Einige CSS-Eigenschaften gehören zu einem Namespace, zum Beispiel gehört border-right zum border Namespace. Um weniger zu schreiben, können wir die Eigenschaftsverschachtelung verwenden und diese Präfixe sogar auf mehreren Ebenen überspringen.

Wenn wir rechts und links von einer Klasse namens .borders einen Rahmen .borders , könnten wir folgendes schreiben:

 //SCSS
 .borders {
    border: 2px dashed blue;
    border: {
        left: 1px solid black;
        right: 1px solid red;
    }
  }

 // CSS output 
 .borders {
    border: 2px dashed blue;  
    border-left: 1px solid black;
    border-right: 1px solid red;
  }
 

Dies erspart uns das Schreiben von border-right und border-left . Allerdings schreiben wir immer noch wiederholenden Code mit den Zeilen 1px solid black und 1px solid red . Wir können noch weniger sich wiederholendes CSS schreiben mit dem Folgenden:

// SCSS
.borders {
  border: 2px dashed blue {
    left: 1px solid black;
    right: {
      color: red;
    }
  }
}

// CSS output
.borders {
   border: 2px dashed blue;
   border-left: 1px solid black;
   border-right-color: red;
}