Sass - Ausgabestil
In diesem Kapitel werden wir darüber lernen SASS Output Style. Die vom SASS generierte CSS-Datei besteht aus einem Standard-CSS-Stil, der die Struktur des Dokuments widerspiegelt. Das Standard-CSS-Styling ist gut, aber möglicherweise nicht für alle Situationen geeignet. Andererseits unterstützt SASS viele andere Stile.
Es unterstützt die folgenden verschiedenen Ausgabestile:
: verschachtelt
Der verschachtelte Stil ist das Standard-Styling von SASS. Diese Art des Stils ist sehr nützlich, wenn Sie mit großen CSS-Dateien arbeiten. Es macht die Struktur der Datei besser lesbar und kann leicht verstanden werden. Jede Eigenschaft nimmt ihre eigene Linie und der Einzug jeder Regel basiert darauf, wie tief sie verschachtelt ist.
Zum Beispiel können wir den Code in der SASS-Datei verschachteln, wie unten gezeigt -
#first {
background-color: #00FFFF;
color: #C0C0C0;
}
#first p {
width: 10em;
}
.highlight {
text-decoration: underline;
font-size: 5em;
background-color: #FFFF00;
}
: erweitert
Bei der erweiterten Art des CSS-Stils hat jede Eigenschaft und Regel eine eigene Zeile. Im Vergleich zum verschachtelten CSS-Stil nimmt es mehr Platz ein. Der Abschnitt Regeln besteht aus Eigenschaften, die alle innerhalb der Regeln vorgesehen sind, während Regeln keiner Einrückung folgen.
Zum Beispiel können wir den Code in der SASS-Datei wie unten gezeigt erweitern -
#first {
background-color: #00FFFF;
color: #C0C0C0;
}
#first p {
width: 10em;
}
.highlight {
text-decoration: underline;
font-size: 5em;
background-color: #FFFF00;
}
:kompakt
Kompakter CSS-Stil benötigt wettbewerbsfähig weniger Platz als Erweitert und Verschachtelt. Es konzentriert sich hauptsächlich auf Selektoren und nicht auf deren Eigenschaften. Jeder Selektor nimmt eine Zeile ein und seine Eigenschaften werden ebenfalls in derselben Zeile platziert. Verschachtelte Regeln werden ohne Zeilenumbruch nebeneinander positioniert, und zwischen den einzelnen Regelgruppen werden neue Zeilen eingefügt.
Zum Beispiel können wir den Code in der SASS-Datei wie unten gezeigt komprimieren -
#first {
background-color: #00FFFF; color: #C0C0C0;
}
#first p {
width: 10em;
}
.highlight {
text-decoration: underline; font-size: 5em; background-color: #FFFF00;
}
: komprimiert
Der komprimierte CSS-Stil benötigt im Vergleich zu allen anderen oben beschriebenen Stilen den geringsten Speicherplatz. Es bietet Leerzeichen nur zum Trennen von Selektoren und Zeilenumbrüchen am Ende der Datei. Diese Art des Stylings ist verwirrend und nicht leicht lesbar.
Zum Beispiel können wir den Code in der SASS-Datei wie unten gezeigt komprimieren -
#first {
background-color:#00FFFF;color:#C0C0C0
}
#first p {
width:10em
}
.highlight {
text-decoration:underline;font-size:5em;background-color:#FFFF00
}