SASS | Stilregeln
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.