Was ist Sass? Erfahren Sie, wie Sie diese CSS-Erweiterungssprache verwenden

Syntaktisch geniale Stylesheets (Sass) ist eine beliebte CSS-Erweiterungssprache. Die Sprache existiert seit rund 15 Jahren. Es funktioniert gut mit jeder CSS-Version und ist daher mit jeder CSS-Bibliothek und jedem Framework kompatibel, von Bootstrap bis Foundation.

Die Sprache ermöglicht es Ihnen, Sass-Code zu schreiben und diesen Code dann in CSS zu kompilieren. Der Wert der Verwendung von Sass anstelle von einfachem CSS besteht darin, dass es zusätzliche Funktionen bietet, die derzeit außerhalb des Geltungsbereichs von CSS liegen.

In diesem Tutorial lernen Sie, wie Sie Sass und seine wichtigsten Funktionen verwenden.

Installation von Sass

Es gibt mehrere Möglichkeiten, Sass auf Ihrem Gerät zu verwenden. Dazu gehören das Ausführen einer Anwendung (z. B. LiveReload oder Scout-App), das Herunterladen Sass von GitHub, oder installieren Sie es mit npm.

Sass mit npm installieren

Um Sass mit npm zu installieren, müssen Sie dies tun Installieren Sie NodeJS und npm auf Ihrem Gerät. Dann müssen Sie eine erstellen

Paket.json Datei (was eine bewährte Methode ist, wenn Sie ein npm-Paket in Ihren Projekten installieren). Sie können eine Basis erstellen Paket.json Datei in Ihrem Projektverzeichnis mit dem folgenden Terminalbefehl:

npm init -y

Durch Ausführen dieses Befehls wird eine package.json-Datei mit folgendem Inhalt generiert:

{
 "name": "meine_app",
 "Version": "1.0.0",
 "Bezeichnung": "",
 "main": "index.js",
 "Skripte": {
 "test": "echo \"Fehler: kein Test angegeben\" && Ausgang 1"
 },
 "Schlüsselwörter": [],
 "Autor": "",
 "Lizenz": "ISC"
}

Die Paket.json Datei ist wichtig, da sie als Konfiguration für Ihr Projekt dient. Jedes Mal, wenn Sie ein neues npm-Paket installieren, wird die Paket.json Datei wird dies widerspiegeln.

Jetzt können Sie Sass installieren, indem Sie den folgenden Befehl in Ihr Terminal einfügen:

npm installiert sass

Dieser Befehl aktualisiert die Paket.json Datei, indem Sie eine neue erstellen Abhängigkeitsfeld, die das neue Sass-Paket enthalten wird. Es wird auch eine neue generiert Paketsperre.json file und installiere sass (plus Abhängigkeiten) in a node_modules Verzeichnis.

Die verschiedenen Arten von Sass-Dateien

Eine Sass-Datei kann eine von zwei Erweiterungen haben, .sass oder .scss. Der Hauptunterschied zwischen ihnen besteht darin, dass die .scss -Datei verwendet geschweifte Klammern und Semikolons (ähnlich wie CSS), während die .sass Dateistrukturen CSS mit Einrückung (ähnlich wie Python). Einige Entwickler ziehen es vor, die zu verwenden .scss Datei, da ihre Struktur CSS näher kommt.

Ein Beispiel für eine .scss-Datei

$Primärfarbe: blau;
Karosserie {
 Farbe: $Primärfarbe;
 P {
 Farbe Rot;
 }
}

Ein Beispiel für eine .sass-Datei

$Primärfarbe: blau
Karosserie
 Farbe: $Primärfarbe
 P
 Farbe Rot

Kompilieren einer Sass-Datei in CSS

Eine individuelle Sass-Datei können Sie mit der frech Kommandozeilenprogramm:

sass Datei.scss > Datei.css

Sie können sass auch für alle Dateien in einem bestimmten Verzeichnis ausführen:

sass scss: dist/css/

Dieser Befehl kompiliert alle Sass-Dateien innerhalb der scss Verzeichnis und speichert die resultierenden Dateien in Entfernung/css.

Wenn Sie npm verwenden, können Sie mithilfe von eine praktische Verknüpfung für die Sass-Kompilierung einrichten Skripte Feld in Ihrem Paket.json Datei:

"Skripte": {
 "test": "echo \"Fehler: kein Test angegeben\" && Ausgang 1",
 "sass": "sass --watch scss: dist/css/"
 },

Diese Konfiguration verwendet die --Uhr Möglichkeit. Es hält sass am Laufen und stellt sicher, dass es diese Dateien neu kompiliert, wenn sie sich ändern. Für jede Datei generiert sass eine .css und ein .css.map Datei.

Um das obige Sass-Skript auszuführen, müssen Sie den folgenden Befehl in Ihrem Terminal ausführen:

npm laufen sass

Wenn Sie diesen Befehl ausführen, wird eine Ausgabe ähnlich der folgenden generiert:

> [email protected] sass C:\Users\kadeisha\Documents\my_app
> sass --watch scss: dist/css/
Kompiliert scss\main.scss zu dist\css\main.css.
Sass hält Ausschau nach Veränderungen. Drücken Sie Strg-C, um zu stoppen.

Sass-Variablen

Sie können heute Variablen in CSS erstellen, aber vor 15 Jahren gab es keine CSS-Variablen, daher war die Unterstützung durch Sass für sie wertvoll. Sass-Variablen funktionieren ähnlich wie CSS-Variablen. Sie speichern Werte (z. B. Farben), die Sie in einer CSS-Datei verwenden möchten. Einer der Hauptvorteile von Variablen besteht darin, dass Sie viele Vorkommen eines Werts aktualisieren können, indem Sie ihn an nur einer Stelle ändern.

Jede Sass-Variable beginnt mit dem Dollarzeichen, gefolgt von einer beliebigen Kombination von Zeichen. Versuchen Sie, Ihre Variablen beschreibend zu gestalten, wie z $Primärfarbe Beispiel oben. Es ist wichtig zu beachten, dass eine Sass-Variable nicht in CSS-Variablen kompiliert wird. Zum Beispiel diese .scss-Datei:

$Primärfarbe: blau;
Karosserie {
 Farbe: $Primärfarbe;
}

Wird zu folgendem CSS kompiliert:

Karosserie {
 Farbe blau;
}

Wie Sie der obigen Datei entnehmen können, gibt es keine CSS-Variablen. Der Vorteil von Variablen besteht darin, dass jede Änderung an der Sass-Datei die entsprechende CSS-Datei aktualisiert.

Sass Mixins

Wenn Sie eine Eigenschaft haben, die Sie während Ihres gesamten Projekts mehrmals verwenden möchten, dann ist eine Variable großartig. Wenn Sie jedoch eine Gruppe von Eigenschaften haben, die Sie als Einheit verwenden möchten, reicht ein Mixin aus.

Jedes Mixin beginnt mit dem @mixin Schlüsselwort, gefolgt von dem Namen, den Sie dem Mixin zuweisen möchten. Sie haben die Möglichkeit, Variablen als Parameter an das Mixin zu übergeben und diese Variablen innerhalb des Hauptteils des Mixins zu verwenden, ähnlich wie eine Funktion.

Mit einem Mixin

@mixin light-theme($primary-color: white, $secondary-color: #2c2c2c) {
 Schriftfamilie: „Franklin Gothic Medium“, „Arial Narrow“, Arial, serifenlos;
 Hintergrundfarbe: $primary-color;
 Farbe: $sekundäre Farbe;
}
#Zuhause {
 @include Lichtthema (blau);
}

Das erste, was Ihnen im obigen Code auffallen könnte, ist, dass das Mixin zwei Argumente akzeptiert. Sie können Argumenten Standardwerte zuweisen und sie überschreiben, wenn Sie sie einschließen.

Nachdem Sie Ihr Mixin erstellt haben, können Sie es in jedem Abschnitt Ihrer Website verwenden, indem Sie das verwenden @enthalten Schlüsselwort gefolgt vom Namen des Mixins.

Durch das Kompilieren des obigen Sass-Codes wird der folgende CSS-Code in Ihrer Zieldatei generiert:

#Zuhause {
 Schriftfamilie: "Franklin Gothic Medium", "Arial Narrow", Arial, serifenlos;
 Hintergrundfarbe: blau;
 Farbe: #2c2c2c;
}

Sass-Funktionen

Abgesehen von den unterschiedlichen Schlüsselwörtern besteht der Hauptunterschied zwischen einer Funktion und einem Mixin darin, dass eine Funktion etwas zurückgeben muss. Sie können Sass-Funktionen verwenden, um Werte zu berechnen oder Operationen auszuführen.

@function add-numbers($num-eins, $num-zwei){
 $summe: 0;
 $summe: $num-eins + $num-zwei;
 @return $summe 
}

Diese obige Funktion akzeptiert zwei Zahlen und gibt ihre Summe zurück. Sass-Funktionen können sogar if-Anweisungen, for-Schleifen und andere Ablaufsteuerungsanweisungen enthalten.

Sass-Module

Wenn Sie alle Ihre Variablen, Mixins und Funktionen in dieselbe Datei aufnehmen müssten, hätten Sie beim Erstellen großer Anwendungen eine riesige Sass-Datei. Module bieten eine Möglichkeit, große Dateien in kleinere aufzuteilen, die sass während der Kompilierung kombiniert. Sie können beispielsweise ein Funktionsmodul und ein Mixin-Modul haben, alles, was Sie sich merken müssen, ist das @verwenden Stichwort.

Hier ist ein Beispiel, das zeigt, wie Sie das vorherige Mixin in eine eigene Datei aufteilen können:

Die mixins.scss-Datei

@mixin light-theme($primary-color: white, $secondary-color: #2c2c2c) {
 Schriftfamilie: „Franklin Gothic Medium“, „Arial Narrow“, Arial, serifenlos;
 Hintergrundfarbe: $primary-color;
 Farbe: $sekundäre Farbe;
}

Die main.scss-Datei

@use 'mixins';
#Zuhause{
 @include mixins.light-theme;
}

Um eine externe Datei als Modul zu importieren und zu verwenden, müssen Sie die @verwenden Schlüsselwort, um es zu importieren. Um dann ein bestimmtes Mixin aus der importierten Datei zu verwenden, stellen Sie dem bestimmten Mixin-Namen den Dateinamen gefolgt von einem Punkt voran. Durch das Kompilieren der obigen Dateien wird der folgende CSS-Code generiert:

#Zuhause {
 Schriftfamilie: "Franklin Gothic Medium", "Arial Narrow", Arial, serifenlos;
 Hintergrundfarbe: weiß;
 Farbe: #2c2c2c;
}

Verwenden Sie Sass, um Ihr CSS zu erweitern und zu organisieren

Sass ist eine Erweiterung der CSS-Syntax. Es ermöglicht Ihnen, Ihre Stylesheets zu rationalisieren und effizienter zu verwalten. Sie müssen jedoch CSS und Webdesign-Prinzipien beherrschen, um effektive Designs zu erstellen.

In diesem Artikel erfahren Sie, wie Sie Sass installieren und verwenden. Sie haben gelernt, wie man Sass-Variablen, Mixins, Funktionen und Module erstellt. Jetzt müssen Sie nur noch ein HTML-Dokument erstellen und zusehen, wie Ihr Sass-Code zum Leben erweckt wird.

8 grundlegende CSS-Tipps und Tricks, die jeder Entwickler kennen sollte

Lesen Sie weiter

Über den Autor