4 flexible SCSS-Kompilierungsausgabestile

Vielen Leuten wird das Kompilieren erklärt, sobald sie Scss verwenden. Daher gibt es grundsätzlich nur eine Methode zur Befehlskompilierung. Tatsächlich bietet Scss 4 CSS-Ausgabestile, um den Anforderungen mehrerer Benutzer gerecht zu werden. Die verschiedenen Ausgabemodi sind wie folgt:

• Verschachtelter Ausgabemodus verschachtelt
• Erweiterter Ausgabemodus
• Kompakter Ausgabemodus
• Komprimierter Ausgabemodus komprimiert

Anschließend können Sie nach Belieben Parameter verwenden, um Ihren bevorzugten CSS-Stil zu generieren.

1. verschachtelt

„nested“ ist ein verschachtelter Ausgabestil, d. h. die linke geschweifte Klammer und der CSS-Klassenname (die erste Zeile) sind ausgerichtet. Die rechte geschweifte Klammer wird ohne Umbruch an der letzten Zeile ausgerichtet.

Dieser Stil wird im Allgemeinen seltener verwendet, da nicht viele Leute CSS normalerweise auf diese Weise schreiben und der Stil eher umständlich ist.

Der Kompilierungsbefehl lautet:

sass abc.scss:abc.css --style verschachtelt

Erzeugt das folgende Ergebnis:

.header {
  Hintergrund: #f00;
  Farbe: #000;
  Schriftgröße: 20px; }
.Seitenleiste {
  schweben: links;
  Breite: 300px;
  Höhe: 500px; }
.hauptsächlich {
  schweben: rechts;
  Breite: 800px;
  Polsterung: 20px;
  Mindesthöhe: 500px; }

2. erweitert

Erweitert ist der erweiterte Ausgabemodus, ein Stil, der auch von Front-End-Entwicklern häufig verwendet wird, um CSS direkt zu schreiben. Die linke geschweifte Klammer ist an der ersten Zeile ausgerichtet und wird nicht umbrochen. Die rechte geschweifte Klammer endet in einer neuen Zeile.

Der Kompilierungsbefehl lautet:

sass abc.scss:abc.css --style erweitert

Erzeugt das folgende Ergebnis:

.header {
  Hintergrund: #f00;
  Farbe: #000;
  Schriftgröße: 20px;
}
.Seitenleiste {
  schweben: links;
  Breite: 300px;
  Höhe: 500px;
}
.hauptsächlich {
  schweben: rechts;
  Breite: 800px;
  Polsterung: 20px;
  Mindesthöhe: 500px;
}

3.kompakt

Compact ist eine kompakte Ausgabemethode und eine weitere Methode, die häufig von Front-End-Entwicklern verwendet wird, um CSS direkt zu schreiben. Die linke und rechte geschweifte Klammer wird nicht umbrochen. Die CSS-Eigenschaftswerte innerhalb der geschweiften Klammern werden nicht umbrochen und hintereinander geschrieben.

Es ist sehr benutzerfreundlich für Freunde, die lieber einzeiliges CSS schreiben.

Der Kompilierungsbefehl lautet:

sass abc.scss:abc.css --Stil kompakt

Erzeugt das folgende Ergebnis:

.header { Hintergrund: #f00; Farbe: #000; Schriftgröße: 20px; }
.sidebar { float: links; Breite: 300px; Höhe: 500px; }
.main { float: rechts; Breite: 800px; Polsterung: 20px; Mindesthöhe: 500px; }

4. komprimiert

„komprimiert“ ist der komprimierte Ausgabemodus. Der gesamte Inhalt wird nicht umbrochen und alle Kommentare und Leerzeichen werden entfernt. Zerquetschen Sie den gesamten Code zu einer Kugel.

Es wird normalerweise in Onlinesituationen verwendet oder wenn es überhaupt nicht notwendig ist, CSS-Dateien zu lesen oder zu ändern. Die Datei wird kleiner.

Der Kompilierungsbefehl lautet:

sass abc.scss:abc.css --style komprimiert

Erzeugt das folgende Ergebnis:

.header{Hintergrund:#f00;Farbe:#000;Schriftgröße:20px}.sidebar{float:links;Breite:300px;Höhe:500px}.main{float:rechts;Breite:800px;Padding:20px;Mindesthöhe:500px}

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.