Genau wie CSS sind Stilregeln auch die Basis von SASS. Es wird ähnlich wie CSS verwendet. Wählen Sie die zu formatierenden Elemente mit einem Selektor aus und deklarieren Sie dann ihre Eigenschaften, die das Aussehen dieser Elemente weiter beeinflussen.

Beispiel:
Sass-Code:

.header
  padding: 3px 10px
  font-size: 40px
  font-family: sans-serif
  border: 2px solid green

Dies würde zu folgender CSS-Ausgabe führen:

.header{
  padding: 3px 10px;
  font-size: 40px;
  font-family: sans-serif;
  border: 2px solid green;
}

Aber der Vorteil, da es sich nur wiederholt. SASS möchte Ihren Code einfach machen und sich nicht nur wiederholen. In SASS können Sie also vermeiden, denselben Selektor immer wieder zu wiederholen. Sie können ganz einfach eine Stilregel in die andere schreiben. SASS erledigt automatisch Ihren gewünschten Job. Diese Funktion von SASS ist als Verschachtelung bekannt .

Beispiel: Sass-Code

navbar
  ul
    padding: 2px
    list-style: square
  
  li
    display: inline-block
  
  a
    display: block
    padding: 4px 10px
    font-family: sans-serif

Dies würde zu folgender CSS-Ausgabe führen:

navbar ul{
    padding: 2px;
    list-style: square;
}
navbar li{
    display: inline-block;
}
navbar a{
    display: block;
    padding: 4px 10px;
    font-family: sans-serif;
}

Verschachtelungsregeln sind ziemlich nützlich, aber manchmal können sie eine große Menge an CSS erzeugen. Je mehr Sie verschachteln, desto mehr Bandbreite wird zum Generieren von CSS benötigt, und desto mehr Arbeit wird von Ihrem Durchsuchen geleistet, um es zu rendern. Daher müssen die Selektoren flach gehalten werden.

Einige weitere nützliche Beispiele: Verschachtelte Regeln sind sehr nützlich für die Handhabung der Auswahllisten. Selektorenlisten beziehen sich auf die durch Kommas getrennte Liste der Selektoren. Diese sind als folgendes Beispiel zusammengestellt:

SASS-Code:

.abc, .def
  ul, p
    padding: 2px
    font-family: sans-serif
    border: 1px

Dies würde zu folgender CSS-Ausgabe führen:

.abc ul, .abc p, .def ul, .def p {
    padding: 2px;
    font-family: sans-serif;
    border: 1px
}

Interpolation: Um Werte wie Variablen und Funktionen in die Selektoren einzufügen, können Sie die Interpolation verwenden . Die Interpolation ist beim Erstellen von Mixins sehr nützlich, da Sie damit Selektoren aus den von Ihren Benutzern bereitgestellten Parametern generieren können.

Beispiel: Sass-Code

@mixin full-form($name, $glyph) 
    span.full-form-#{$name} 
    font-family: sans-serif
    padding: 4px
    border: 10px
    content: $glyph
@include full-form("GFG", "GeeksForGeeks")

Dies würde zu folgender CSS-Ausgabe führen:

span.full-form-GFG {
  font-family: sans-serif;
  padding: 4px;
  border: 10px;
  content: "GeeksForGeeks";
}

Sass analysiert Selektoren erst, nachdem die Interpolation vollständig aufgelöst wurde, was bedeutet, dass Sie die Interpolation sicher verwenden können, um einen beliebigen Teil des Selektors zu generieren, ohne befürchten zu müssen, dass es nicht funktioniert.