SASS Schnellstart – Property Nesting

Eigenschaften verschachteln

Das sog. Property-Nesting wird immer dann verwendet, wenn es CSS-Eigenschaften gibt, die unter denselben Namespace fallen. Bei dem background-Namespace, haben wir bspw. folgende Eigenschaften:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

Im Falle von CSS müssen wir alle diese Eigenschaften separat eingeben, wenn wir sie verwenden wollen.

SCSS bietet uns hingegen die verschachtelte Kurzform, die die Arbeit viel einfacher macht, indem wir den Namespace gefolgt von allen Eigenschaften schreiben, also verschachtelt.

Schaue dir folgendes SCSS-Beispiel an:

body { 
   background { 
      color: blue; 
      attachment: fixed; 
      repeat: no-repeat; 
   }
}

Der o.g. Code wird kompiliert zu:

body {
  background-color: blue;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

Ähnlich im Falle des Font-Namensraumes,

.meineschrift {
    font {
        family: fantasy;
        größe: 20em;
        weight: bold;
    }
}

Dies wird zu folgendem CSS-Code kompiliert,

.meineschrift {
  font-family: fantasy;
  font-size: 20em;
  font-weight: bold
}

In dieser kurzen Lektion haben wir das Konzept von verschachtelten Eigenschaften behandelt. Die Lesbarkeit deiner CSS-Sytlesheets wird dadurch wesentlich verbessert.