Sass umarmen: Warum Sie aufhören sollten, Vanilla CSS zu verwenden

Als ich zum ersten Mal von Sass und anderen CSS-Präprozessoren hörte, waren meine genauen Gedanken nicht gerade begeistert. „Warum brauchen wir ein weiteres Tool für etwas, das bereits so gut funktioniert wie CSS?“. „Das werde ich nicht verwenden“. „Mein CSS ist so geordnet, dass ich es nicht brauche“. „Ein Präprozessor ist für Leute, die nicht wissen, wie man CSS schreibt, wenn Sie wissen, wie man CSS schreibt, brauchen Sie keinen Präprozessor“. „Schließlich sind Prozessoren für Leute, die nicht wissen, wie man CSS schreibt. Wenn sie es täten, bräuchten sie keinen Präprozessor“. Und ich habe sie tatsächlich eine Zeit lang gemieden, bis ich gezwungen war, sie in mehreren Projekten zu verwenden.

Mir war nicht klar, wie viel Spaß mir die Arbeit mit Sass macht, bis ich kürzlich in einem Projekt wieder auf Vanilla CSS umsteigen musste. Während dieser Zeit habe ich so viel gelernt, dass ich beschlossen habe, Sass zu loben und die Welt zu einer besseren Welt und dich zu einem glücklicheren Menschen zu machen!

Warum überhaupt Sass verwenden?

Organisation: @import

Dieses Projekt, das ich gerade erwähnt habe, eine große E-Commerce-Website, hatte eine einzige CSS-Datei mit 7184 Zeilen unkomprimierter Stildeklarationen. Ja, Sie haben richtig gelesen: siebentausendeinhundertvierundachtzig Zeilen CSS. Ich bin mir sicher, dass dies nicht die größte CSS-Datei ist, mit der Frontend-Entwickler in der Branche umgehen mussten, aber sie war groß genug, um ein komplettes Durcheinander zu sein.

Das ist der erste Grund, warum Sie Sass brauchen: Es hilft Ihnen, Ihre Stylesheets zu organisieren und zu modularisieren. Es sind keine Variablen, es ist keine Verschachtelung. Für mich sind die Hauptfunktion von Sass Partials und wie es die CSS-@import-Regel erweitert, damit es SCSS- und Sass-Dateien importieren kann. In der Praxis bedeutet dies, dass Sie Ihre riesige style.css-Datei in mehrere kleinere Dateien aufteilen können, die einfacher zu pflegen, zu verstehen und zu organisieren sind.

Die @import-Regel gibt es schon fast so lange wie CSS selbst. Es hat jedoch einen schlechten Ruf erlangt, da Sie bei Verwendung von @import in Ihren CSS-Dateien separate HTTP-Anforderungen auslösen, eine für jede CSS-Datei, die Sie importieren. Dies kann sich nachteilig auf die Leistung Ihrer Website auswirken. Was passiert also, wenn Sie es mit Sass verwenden? Wenn Sie noch nie darüber nachgedacht haben, was das Wort „Präprozessor“ bedeutet, ist jetzt der richtige Zeitpunkt dafür.

Ein Präprozessor ist ein Programm, das seine Eingabedaten verarbeitet, um eine Ausgabe zu erzeugen, die als Eingabe für ein anderes Programm verwendet wird. —Wikipedia

Um auf unsere @import-Regel zurückzukommen, bedeutet dies, dass der @import von Sass gehandhabt wird und alle unsere CSS- und SCSS-Dateien zu einer einzigen Datei kompiliert werden, die auf unserer Live-Site landet. Der Benutzer muss nur eine Anfrage stellen und lädt eine einzelne Datei herunter, während Ihre Projektstruktur aus Hunderten von modularisierten Dateien bestehen kann. So könnte die style.scss eines typischen Sass-Projekts aussehen:

 @import “variables”; @import “reset”; @import “fonts”; @import “base”; @import “buttons”; @import “layout”;

Wiederholen Sie sich nicht: Variablen

Jeder Artikel, der Sass lobt, wird wahrscheinlich mit der Erwähnung seines Hauptmerkmals beginnen - Variablen. Die häufigste Verwendung von Variablen ist eine Farbpalette. Wie oft haben Sie mehrere Deklarationen von angeblich derselben Farbe gefunden, die im CSS als leicht unterschiedliche Schattierungen gelandet sind, weil niemand denselben Hex-Code verwendet? Sass zur Rettung. In Sass können Sie Variablen mit fast jedem Wert deklarieren. Unsere Farbpalette kann also etwa so aussehen:

 $brand: #226666; $secondary: #403075; $emphasis: #AA8439;

Die mit „$“ beginnenden Wörter sind Sass-Variablen. Das bedeutet, dass Sie diese Wörter später in Ihren Stylesheets verwenden können und sie den zuvor definierten Werten zugeordnet werden:

 body { background: $secondary; } .logo { color: $brand; } a { color: $emphasis; } a:hover { color: $brand; }

Stellen Sie sich vor, wie dies unsere 7184 Zeilen CSS-Code verändern könnte, und Sie könnten sofort anfangen, sich nach Sass zu sehnen. Stellen Sie sich noch besser vor, es gibt ein Redesign der Marke und Sie müssen alle Farben in Ihrem CSS aktualisieren. Mit Sass müssen Sie lediglich die Deklarationen dieser Variablen einmal aktualisieren, und baam! Die Änderungen betreffen alle Ihre Stylesheets.

Ich habe dieses Beispiel in Sassmeister, einem Sass-Spielplatz, codiert. Versuchen Sie also, diese Variablen in etwas anderes zu ändern.

Die Nützlichkeit von Variablen beschränkt sich nicht nur auf Farben, sondern auch auf Deklarationen von Schriftarten, Größen, Medienabfragen und mehr. Dies ist ein wirklich einfaches Beispiel, um Ihnen eine Vorstellung zu geben, aber glauben Sie mir, die Möglichkeiten mit Sass sind endlos.

Saubererer Quellcode: Verschachtelung

Verschachtelung könnte möglicherweise das am zweithäufigsten erwähnte Merkmal von Sass sein. Als ich nach der Verwendung von Sass zu Vanilla CSS zurückkehrte, schien die CSS-Datei, die ich mir ansah, so überladen, dass ich nicht sicher war, ob sie minimiert war. Ohne Verschachtelung sieht Vanilla CSS nicht besser aus als hübsch gedruckte .min.css- Dateien:

 .header { margin: 0; padding: 1em; border-bottom: 1px solid #CCC; } .header.is-fixed { position: fixed; top: 0; right: 0; left: 0; } .header .nav { list-style: none; } .header .nav li { display: inline-block; } .header .nav li a { display: block; padding: 0.5em; color: #AA8439; }

Mit Nesting können Sie Klassen zwischen den geschweiften Klammern einer Deklaration einfügen. Sass wird die Selektoren ziemlich intuitiv kompilieren und handhaben. Sie können sogar das Zeichen „&“ verwenden, um eine Referenz des übergeordneten Selektors zu erhalten. Um auf unser Beispiel-CSS zurückzukommen, können wir es umwandeln in:

 .header { margin: 0; padding: 1em; border-bottom: 1px solid #CCC; &.is-fixed { position: fixed; top: 0; right: 0; left: 0; } .nav { list-style: none; li { display: inline-block; a { display: block; padding: 0.5em; color: #AA8439; } } } }

Es sieht schön aus und ist einfacher zu lesen. Fühlen Sie sich frei, mit diesem Beispiel zu spielen.

Aufs Neue! Wiederholen Sie sich nicht: Mixins und Extends

Wiederholungen in CSS sind immer schwer zu vermeiden. Und es schadet nicht, das ein bisschen mehr zu betonen, besonders wenn Sass dir Mixins und Erweiterungen gibt. Sie sind beide leistungsstarke Funktionen und helfen, viele Wiederholungen zu vermeiden. Die Möglichkeiten mit Mixins und Erweiterungen scheinen kein Ende zu haben. Mit Mixins können Sie parametrisierte CSS-Deklarationen erstellen und diese in Ihren Stylesheets wiederverwenden.

Nehmen wir zum Beispiel an, Sie haben ein Box-Modul mit einer Taste darin. Sie möchten, dass der Rahmen des Felds und der Hintergrund der Schaltfläche dieselbe Farbe haben. Mit Vanilla CSS machen Sie so etwas wie:

 .box { border: 2px solid red; } .box .button { background: red; }

Nehmen wir an, Sie möchten jetzt das gleiche Box-Modul, aber mit einer anderen Farbe. Sie werden Ihrem CSS so etwas hinzufügen:

 .box-alt { border: 2px solid blue; } .box-alt .button { background: blue; }

Nehmen wir nun an, Sie möchten ein Box-Modul, aber mit einem dünneren Rand. Sie würden hinzufügen:

 .box-slim { border: 1px solid red; } .box-slim .button { background: red; }

Viele Wiederholungen, oder? Mit Sass können Sie diese Fälle abstrahieren, um Wiederholungen zu reduzieren. Sie könnten ein Mixin wie dieses definieren:

 @mixin box($borderSize, $color) { border: $borderSize solid $color; .button { background: $color; } }

Und so kann Ihr Quellcode reduziert werden auf:

 .box { @include box(2px, red); } .box-alt { @include box(2px, blue); } .box-slim { @include box(1px, red); }

Sieht wunderschön aus, oder? Spielen Sie mit diesem Beispiel herum. Sie können Ihre eigene Bibliothek mit Mixins erstellen oder noch besser eine der Community-Bibliotheken da draußen verwenden.

Erweiterungen sind ähnlich, sie ermöglichen es Ihnen, Eigenschaften von einem Selektor zu einem anderen zu teilen. Anstatt jedoch mehrere Deklarationen auszugeben, geben sie eine Liste von Klassen aus, ohne Ihre Eigenschaften zu wiederholen. Auf diese Weise können Sie auch die Wiederholung von Code in Ihrer Ausgabe vermeiden. Vergessen wir die Schaltflächen in unserem vorherigen Beispiel und sehen wir uns an, wie @extend mit .boxes funktionieren würde.

Angenommen, Sie deklarieren eine erste Box:

 .box { margin: 1em; padding: 1em; border: 2px solid red; }

Jetzt möchten Sie zwei Kästchen, die diesem ähnlich sind, aber mit unterschiedlichen Rahmenfarben. Sie können Folgendes tun:

 .box-blue { @extend .box; border-color: blue; } .box-red { @extend .box; border-color: red; }

So würde das kompilierte CSS aussehen:

 .box, .box-blue, .box-red { margin: 1em; padding: 1em; border: 2px solid red; } .box-blue { border-color: blue; } .box-red { border-color: red; }

Mächtig, oder? Das Beispiel finden Sie hier. Wenn Sie das resultierende CSS überprüfen, werden Sie feststellen, dass die Klasse .box in der Ausgabe enthalten ist. Wenn Sie dieses Verhalten nicht möchten, können Sie @extend mit „Platzhaltern“ kombinieren. Ein Platzhalter ist ein spezieller Selektor, der keine Klasse im CSS ausgibt. Zum Beispiel finde ich mich manchmal dabei, die Standardstile von Listen häufig zurückzusetzen. Ich verwende im Allgemeinen @extend mit einem Platzhalter wie diesem:

 %unstyled-list { list-style: none; margin: 0; padding: 0; }

Sie können dieses Muster dann in all Ihren Stylesheets wiederverwenden:

 .search-results { @extend %unstyled-list; } .posts { @extend %unstyled-list; } .nav { @extend %unstyled-list; }

Ihr kompiliertes CSS sieht folgendermaßen aus:

 .search-results, .posts, .nav { list-style: none; margin: 0; padding: 0; }

Schauen Sie sich die Beispiele hier an.

Ist da mehr?

Absolut! Ich wollte diesen Artikel nicht überkomplizieren, aber es gibt eine Sassy -Welt, die darauf wartet, von Ihnen entdeckt zu werden; und darüber hinaus gibt es noch jede Menge Funktionen: Operationen, einzeilige Kommentare mit //, Funktionen, if-Schleifen … wenn Sie jemals gedacht haben, „es wäre großartig, mit CSS irgendein ‚X'-Ding zu machen“, bin ich mir sicher Das Ding 'X' ist bereits von Sass gemacht. „CSS mit Superkräften“ ist sein Slogan, und das könnte der Wahrheit nicht näher kommen.

Fazit

Besuchen Sie die Installationsseite und fangen Sie an zu hacken! Glauben Sie mir, Sie werden es nicht bereuen.

Ja, es gibt einige Alternativen zu Sass. Andere Präprozessoren (LESS, Stylus), Postprozessoren, Grunt usw. Es gibt sogar CSS-Variablen. Ich sage nicht, dass Sass die einzige Technologie da draußen ist. Ich sage nur, dass es das Beste ist! Zumindest für jetzt. Glauben Sie nicht, was ich sage? Gehen Sie voran und versuchen Sie es selbst. Sie werden es nicht bereuen!