Sie haben vielleicht schon von CSS-Vorverarbeitung gehört und wundern sich, worum es bei all dem Buzz geht. Sie haben vielleicht sogar davon gehört Sass oder WENIGER .

Kurz gesagt, ermöglicht das Vorverarbeiten Ihres CSS das Schreiben von präziseren Stylesheets, die schön formatiert sind und weniger repetitive Techniken erfordern, die üblicherweise beim Schreiben von CSS-Code verwendet werden. Das Ergebnis ist ein dynamischeres Design und viel Zeit gespart bei der Entwicklung von Websites oder Anwendungen.

Wenn Sie bereits CSS schreiben, können Sie leicht lernen, Ihr CSS vorzuverarbeiten. Sobald Sie den Umfang von Sass verstehen, werden Sie sich fragen, warum Sie nicht früher gewechselt haben.

Wie unterscheidet sich Sass von CSS?

Sass sieht ähnlich wie CSS aus, hat aber seine offensichtlichen Unterschiede, wenn man einmal reintaucht. Es gibt zwei Möglichkeiten, Sass zu schreiben, und es liegt letztendlich bei Ihnen, welchen Stil Sie bevorzugen. Ich benutze den eingerückten und geklammerten Stil (.scss) in meinen Projekten, weil ich gerne visualisieren möchte, wo ein Block endet und beginnt, wenn viel Code verschachtelt wird. Nach der Verarbeitung wird der Sass-Code unter Verwendung einer Vorverarbeitungs-Engine automatisch zu traditionellem CSS kompiliert.

Es gibt viele Apps, mit denen Sie Ihren Sass vorkompilieren können. Zur Installation können Sie die Befehlszeile verwenden, solange Sie Ruby auf Ihrem Computer installiert haben. Wenn Sie mit der Befehlszeile nicht vertraut sind, gibt es andere Möglichkeiten (mehr dazu unten) und wenn dies über Ihrem Kopf ist, besuchen Sie Sass-lang.com, um zu lernen, wie Sie dies in einem einfachen Schritt-für-Schritt-Format tun können. Am Ende, mit einer beliebigen Methode, sei es eine Befehlszeile oder eine App, wird die Sass-Installation Ihre Änderungen überwachen und automatisch für Sie auf traditionelles CSS kompilieren.

Ich empfehle Apps wie Codekit , LiveReload , oder Mischung die dir helfen, ein Sass-Projekt auf einem Mac von Grund auf neu zu erstellen oder wenn du ein Windows-Benutzer bist, den ich empfehle PrePros . Codekit, meine Wahl des Präprozessors, hilft mir bei der Vorverarbeitung meines Sass sowie bei der Validierung und Minimierung Ihres Codes, damit Ihre Website schnell und effektiv ausgeführt werden kann. (Die Fähigkeit zu erstellen Kompass oder Bourbon Basierte Projekte innerhalb von Codekit sind ebenfalls eine großartige Funktion, die jedoch den Rahmen dieses Artikels sprengen würde.) Nachdem Sie sich mit Sass vertraut gemacht haben, sollten Sie sich unbedingt anschauen, wie Sie Compass und Bourbon in Ihren Sass-Projekten verwenden.

Was ist Sass?

Sass steht für Syntaktisch Super Stylesheets und wurde erstellt von Hampton Catlin . Sass führt neue Konzepte wie Variablen, Mixins und Nesting in den CSS-Code ein, den Sie bereits kennen und lieben. Diese Konzepte machen Ihr CSS schließlich genial, einfacher zu schreiben und dynamischer. All diese Funktionen beschleunigen den Arbeitsablauf eines Designers oder Entwicklers.

Was Menschen oft verwirrt, ist die alternative Möglichkeit, Sass zu schreiben. Sie werden andere Tutorials oder Erklärungen von Sass sehen, die die .SCSS- oder die .Sass-Erweiterung für ihre Sass-Dateien verwenden. Dies ist offensichtlich, weil es zwei Möglichkeiten gibt, den Code zu schreiben, der die gleiche Ausgabe erzeugt. Am häufigsten habe ich gesehen, und die Methode, die ich derzeit verwende, ist die geklammerte Version, die als .SCSS bekannt ist. Eine andere Methode ist die Erweiterung .SASS, die stärker auf Einrückung als auf punktuelle Elemente angewiesen ist und von Leerraum abhängig ist. Bei dieser Syntax sind Semikolons oder Klammern nicht erforderlich, wie Sie in CSS und der .SCSS-Syntax sehen.

Schauen Sie sich das Beispiel unten an.

.CSS

#container {width:960px;margin:0 auto;}#container p {color: black;}

.SCSS

/* Same as CSS but has variables and nesting. */$black: #000000;#container {width:960px;margin:0 auto;p {color :$black;}}

.SASS

/* Same as SCSS without semicolons, brackets, and more dependent on indentation. */$black: #000000#containerwidth:960pxmargin: 0 autopcolor:$black

Struktur

Okay, jetzt fragen Sie sich wahrscheinlich, wie Sie Sass für Ihre eigenen Projekte einrichten können. Der Prozess ist ziemlich einfach, besonders wenn Sie CodeKit oder eine ähnliche Anwendung verwenden, um Ihnen auf dem Weg zu helfen.

Eine typische Dateistruktur eines Sass-Projekts sieht wie folgt aus. Das mag entmutigend wirken, aber ich verspreche Ihnen, dass sich Ihr Workflow verbessern wird, wenn Sie sich erst einmal darum gekümmert haben, wie die Dinge zusammen funktionieren. Am Ende wird Ihr gesamter Sass in eine CSS-Datei kompiliert, die die Datei ist, die Sie in Ihre Arbeitsdokumente aufnehmen, sei es HTML, PHP, etc ...

stylesheets/||-- modules/ # Common modules| |-- _all.scss # Global level styles| |-- _utility.scss # Basic utility styles| |-- _colors.scss # Global Colors| ...||-- partials/ # Partials - use these to target specific styles and @import on _base.scss| |-- _base.scss # imports for all mixins + global project variables| |-- _buttons.scss # buttons| |-- _figures.scss # figures| |-- _grids.scss # grids| |-- _typography.scss # typography| |-- _reset.scss # reset| ...||-- vendor/ # CSS or Sass from other projects| |-- _colorpicker.scss| |-- _jquery.ui.core.scss| ...||-- main.scss # primary Sass file - where your main Sass code will likely be.

Wie Sie Ihre Struktur aufbauen, hängt letztendlich von Ihnen ab. Beginnen Sie mit einer grundlegenden Struktur und Feinabstimmung auf Ihre eigenen Bedürfnisse und Arbeitsabläufe.

@Einführen

Sass erweitert die CSS @ import- Regel, um Sass- und SCSS-Dateien importieren zu können. Alle importierten Dateien werden in einer einzelnen ausgegebenen CSS-Datei zusammengeführt. Darüber hinaus werden alle Variablen oder Mixins, die in den importierten Dateien definiert sind, in die Hauptdatei übertragen, was bedeutet, dass Sie jede Datei virtuell mischen und abgleichen können und sicher sein können, dass alle Ihre Stile auf globaler Ebene bleiben.

@ Import importiert einen Dateinamen. Als letzte Möglichkeit werden Sass- oder SCSS-Dateien über den Dateinamen Ihrer Wahl importiert. Wenn es keine Erweiterung gibt, wird Sass versuchen, eine Datei mit diesem Namen und der Erweiterung .scss oder .Sass zu finden und sie zu importieren.

Wenn Sie ein typisches Sass-Projekt eingerichtet haben, werden Sie einige @import-Regeln in einer Basisdatei bemerken. Dadurch können Sie einfach mehrere Dateien erstellen, die nach der Kompilierung effektiv synchronisiert werden. Beispiel:

@import "main.scss";

oder:

@import "main";@Partials

Wenn Sie eine SCSS- oder Sass-Datei haben, die Sie importieren, aber nicht nach CSS kompilieren möchten, können Sie am Anfang des Dateinamens eine Unterstreichung einfügen, die auch als Partial bezeichnet wird. Während der Code kompiliert wird, ignoriert Sass Partials bei der Verarbeitung nach CSS. Zum Beispiel könnten Sie _buttons.scss haben, es würde keine Datei _buttons.css erstellt und Sie können @import "buttons";

Es empfiehlt sich, ein Teillistenverzeichnis zu erstellen und alle partiellen Sass-Dateien darin zu platzieren. Dies stellt sicher, dass Sie keine doppelten Dateinamen haben, die Sass nicht zulassen wird, zum Beispiel die teilweise _buttons.scss und die Datei buttons.scss können nicht im selben Verzeichnis existieren. Die Verwendung von Partials ist eine großartige Möglichkeit, auf globaler Ebene organisiert zu bleiben. Solange Sie die Datei @importieren, ist der von Ihnen geschriebene Sass während des gesamten Projekts verwendbar. In der Regel in Teilbereichen erstellt ich Mixins oder Variablen für das gesamte Projekt. Ich benenne sie basierend auf ihren Inhalten und den Elementen, die sie gestalten.

Variablen

Variablen in CSS sind ein Durchbruch in der modernen Webentwicklung. Mit Sass können Sie Variablen für Dinge wie Schriftarten, Farben, Größen, Rand, Polsterung usw. erstellen. Die Liste ist endlos. Wenn Sie JavaScript oder PHP schreiben, ist das Konzept hinsichtlich der Definition von Variablen und Konventionen ziemlich ähnlich.

Warum also Variablen verwenden? Einfach, Variablen ermöglichen es Ihnen, ein Element mehr als einmal zu verwenden, ähnlich wie eine Klasse in HTML oder eine Variable in JavaScript. Angenommen, Sie definieren mehrere Divs mit einer bestimmten Hintergrundfarbe. Sie können die Variable verwenden, die einfacher zu merken ist als die traditionelle Hexcode- oder RGB-Berechnung. Wenn Sie eine Variable mit einem einfach zu merkenden Namen erstellen, können Sie weniger kopieren und einfügen und produktiver arbeiten. Das gleiche Konzept gilt immer dann, wenn eine Variable implementiert werden kann, und mit Sass, die praktisch überall ist, zum Beispiel diese .scss:

#container {/* Here we define our variables */$basetextsize: 12px;$container-space: 10px;$red: #C0392B;/* Variables are applied */font-size: $basetextsize;padding: $container-space;color : $red;}

führt zu dieser .css-Datei:

#container {font-size: 12px;padding: 10px;color: #C0392B;}

Operationen und Funktionen

Der coole Teil über Variablen ist, dass sie denen in Skriptsprachen sehr ähnlich sind. Variablen innerhalb von Sass können innerhalb von Operationen und Funktionen verwendet werden. Die standardmäßigen mathematischen Operationen (+, -, *, / und%) werden für Zahlen unterstützt. Für Farben gibt es in Sass Funktionen, die auf Helligkeit, Farbton, Sättigung und mehr abzielen.

Diese Funktionalität macht Ihren Code dynamischer denn je. Wenn Sie beispielsweise die allgemeine Linkfarbe Ihrer Site ändern möchten, können Sie einfach die Variable ändern, neu kompilieren und Ihre Site wird dynamisch aktualisiert. Sehen Sie sich ein weiteres Beispiel für eine wiederverwendbare Navigationsliste an, diese .scss:

nav{$nav-width: 900px;$nav-links: 5;$nav-color: #ce4dd6;width: $nav-width;li{float: left;width: $nav-width/$nav-links - 10px;background-color:lighten($nav-color, 20%);&:hover{background-color:lighten ($nav-color, 10%);}  }} 

wird in diesem .css resultieren:

nav {width: 900px;}nav li {float:left;width: 170px;background-color: #E5A0E9;}nav li:hover {background-color: #D976E0;}

Verschachteln

Nesting ist ein großer Grund, warum ich Sass liebe. Sie schreiben am Ende weniger Codezeilen und der gesamte Code ist aufgrund der verschachtelten Formatierung leicht zu lesen. (Das gleiche Konzept der Verschachtelung findet sich auch in LESS.)

Es gibt zwei Arten der Verschachtelung:

Selektorverschachtelung

Die Auswahl von Auswahllisten in Sass ähnelt der Verschachtelung von HTML:

Main Content
Sidebar Content

Die Sass-Version der Verschachtelung:

#container {.main {width:600px;h1 {color: $red;}}.sidebar {width: 300px;h3 {margin: 0;}}}

würde das folgende CSS ergeben:

#container .main {width: 960px;}#container .main h1 {color: #C0392B;}#container .sidebar {width: 300px;}#container .sidebar h3 {margin: 0;}

Verschachtelung von Eigenschaften

Die zweite Art der Verschachtelung ist das Verschachteln von Eigenschaften. Sie können Eigenschaften mit demselben Präfix verschachteln, um Elemente besser zu targetieren, was zu weniger Codezeilen führt, beispielsweise:

#container {.main {font:weight: bold;size: 12px;.intro {font:size: 20px;}}}

würde in diesem CSS resultieren:

#container .main {font-weight:bold;font-size: 12px;}#container .main .intro {font-size:20px;}

Mixins

Von allen Sass-Features müssen Mixins die stärksten sein. Mixins sind ähnlich wie eine Variable, aber auf Steroiden. Sie können einen vollständigen Stil eines Elements definieren und diese Stile im gesamten Projekt wiederverwenden.

Mixins werden mithilfe der @mixin- Direktive definiert, die einen zuvor erstellten Stilblock verwendet und mithilfe der @ include- Direktive auf den Selektor Ihrer Wahl anwendet . Im Folgenden finden Sie ein gängiges CSS-Muster zum Erstellen eines horizontalen Navigationsmenüs. Anstatt für jede Navigationsinstanz den gleichen Code zu schreiben, verwenden Sie einfach ein Mixin und fügen Sie es bei Bedarf später hinzu. Dieses Konzept kann für alles, was Sie immer wieder verwenden, wie Knöpfe, Typografie, Farbverläufe usw. verwendet werden.

/* Here we define the styles */@mixin navigate {list-style-type:none;padding:0;margin:0;overflow:hidden;> li {display:block;float:left;&:last-child{margin-right:0px;}}}

Und hier schließen wir das Mixin mit einer Codezeile ein:

ul.navbar {@include navigate;}

was zu diesem kompilierten CSS führt:

ul.navbar {list-style-type: none;padding:0;margin:0;overflow: hidden;}ul.navbar li {display: block;float: left;}ul.navbar li:last-child {margin-right: 0px;}

Sie können sogar so weit gehen, anpassbare Mixins zu erstellen, die Argumente verwenden, um dynamisch zu aktualisieren. Darüber hinaus können Sie Mixins in andere Mixins aufnehmen oder Funktionen mit Mixins und mehr erstellen. Die Kraft dahinter ist absolut riesig.

Es gibt einige beliebte vordefinierte Mixin-Sammlungen, in denen ich bereits früher Compass und Bourbon erwähnt habe. Mit einem einfachen @import in Ihrem Projekt haben Sie Zugriff auf bereits generierte Mixins, die häufig im Web verwendet werden. Es gibt so viele Optionen, dass es schwierig ist, alles Mögliche abzudecken, aber es macht definitiv Spaß, zu experimentieren und sich die Hände schmutzig zu machen, indem man benutzerdefinierte Animationen oder Übergänge mit ein paar Zeilen Code anstatt mit einem Bildschirm voll entwickelt. Mixins machen die Cross-Browser-Entwicklung zum Kinderspiel, wenn Sie keine browserdefinierten Präfixe mehr innerhalb Ihres CSS eingeben möchten.

Zum Beispiel erstellen wir hier ein Mixin mit Argumenten, die es erlauben, dass es angepasst wird.

@mixin my-border($color, $width) {border: {color: $color;width: $width;style: $dashed;}}p { @include my-border (blue, lin); }

Das gibt uns dieses CSS, wenn es kompiliert wird:

p {border-color: blue;border-width: lin;border-style: dashed;}

Zusammenfassung

Obwohl Sass eine Lernkurve hat, glaube ich wirklich, dass Sie, sobald Sie einmal die Methoden und die Syntax verstanden haben, nie wieder zum Schreiben von Standard-CSS zurückkehren möchten.

Sass ist extrem kraftvoll und ich habe hier nur die Grundlagen behandelt. Mit herkömmlichem CSS haben wir alle das Kopieren und Einfügen oder das Suchen und Ersetzen von Aufgaben kennengelernt, die so viel Zeit in der Entwicklungsphase Ihres Projekts verschwenden. Geben Sie Sass einen Versuch und entdecken Sie, wie Sie in Ihren zukünftigen Projekten einen effektiven Workflow aufbauen können.

Verwenden Sie Sass oder bevorzugen Sie einen anderen CSS-Präprozessor? Hast du einen Lieblings Mix? Lassen Sie es uns in den Kommentaren wissen.

Vorgestelltes Bild / Thumbnail, verwendet Null zum Heldenbild über Shutterstock.