Sass (Syntactically Awesome Style Sheets) ist ein leistungsfähiger CSS-Präprozessor, mit dem Sie Stile effizienter schreiben und Projekte mit mehr Code unterstützen können. Um Sass mit HTML zu verbinden, müssen Sie einige einfache Schritte ausführen, um die Entwicklung zu verbessern und die Unterstützung von Stilen zu erleichtern.
Der erste Schritt besteht darin, Sass auf dem Computer zu installieren. Dazu müssen Sie Ruby installieren und den Sass-Installationsbefehl mit RubyGems ausführen. Nachdem Sie Sass erfolgreich installiert haben, können Sie mit dem Erstellen von Stildateien beginnen.
Um mit Sass zu beginnen, müssen Sie eine Datei mit einer Erweiterung erstellen.scss oder .sass. Innerhalb dieser Datei können Sie alle von Sass bereitgestellten Funktionen nutzen: Variablen, Mixins, Vererbung und vieles mehr. Nachdem Sie die Stile in eine Sass-Datei geschrieben haben, müssen Sie sie in normales CSS kompilieren, das bereits mit HTML verknüpft werden kann.
Sie können Sass in CSS kompilieren, indem Sie verschiedene Tools verwenden, z. B. die Befehlszeile oder die automatischen Projektsammler. Nach dem Kompilieren kann die resultierende CSS-Datei mit einem Tag an den HTML-Code angehängt werden. Jetzt werden alle in der Sass-Datei geschriebenen Stile auf die HTML-Seite angewendet.
Verbinden von Sass mit HTML: Schritt für Schritt
Um Sass in einem Webprojekt zu verwenden, müssen Sie einige einfache Schritte ausführen.
Schritt 1: Installieren Sie Sass auf Ihrem Computer. Um dies zu tun, müssen Sie zuerst Node installieren.js und dann den Befehl im Terminal ausführen: npm install -g sass. Jetzt wird Sass global verfügbar sein.
Schritt 2: Erstellt eine Stildatei im Sass-Format. Erstellen Sie eine neue Datei mit der Erweiterung .scss und fügen Sie Ihren gesamten Stilcode darin ein. Sie können alle Sass-Funktionen wie Variablen, Verschachtelung und vieles mehr verwenden.
Schritt 3: Kompilieren von Sass in CSS. Nachdem die Datei erstellt wurde .scss, Sie müssen es in normales CSS kompilieren. Führen Sie dazu den Befehl aus sass input.scss output.css wo input.scss ist der Pfad zu Ihrer Datei .scss und output.css ist der Name der Datei, in der das kompilierte CSS gespeichert wird.
Schritt 4: Verbinden des kompilierten CSS mit HTML. Jetzt müssen Sie ein Tag in Ihrer HTML-Datei hinzufügen, um Ihr kompiliertes CSS zu verknüpfen. Geben Sie den Pfad zu Ihrer Output-Datei an.css im href - Attribut des Tags und fügen Sie auch rel="stylesheet" hinzu, um den Typ der zu verbindenden Datei anzugeben.
Fertig! Jetzt verwendet Ihr HTML die Stile aus der Sass-Datei. Sie können den Code in der Datei ändern .scss und das kompilierte CSS automatisch mit einigen Tools wie Gulp oder Webpack aktualisieren.
Ruby installieren
Schritt 1: Besuchen Sie die offizielle Ruby-Website unter https://www.ruby-lang.org/ru/
Schritt 2: Wählen Sie im oberen Menü der Website den Abschnitt "Download" aus
Schritt 3: Wählen Sie auf der Download-Seite die Ruby-Version aus, die zu Ihrem Betriebssystem passt (z. B. Windows, macOS, Linux)
Schritt 4: Folgen Sie den Anweisungen, um Ruby gemäß dem gewählten Betriebssystem auf Ihrem Computer zu installieren
Nach der Installation von Ruby können Sie mit der Installation von SASS fortfahren und damit beginnen, Stile in Ihr Projekt zu schreiben.
Installieren von Sass
Um mit Sass zu beginnen, müssen Sie es auf Ihrem Computer installieren. So können Sie es tun:
- Installieren Sie die neueste Version von Ruby auf Ihrem Computer, wenn Sie dies nicht bereits getan haben.
- Öffnen Sie eine Eingabeaufforderung oder ein Terminal und geben Sie den folgenden Befehl ein: gem install sass
- Warten Sie, bis die Installation abgeschlossen ist. Danach ist Sass in der Befehlszeile verfügbar.
Jetzt, da Sass installiert ist, können Sie damit beginnen, Stile für Ihre Webprojekte zu erstellen.
Anmerkung: Wenn Sie Fragen haben oder Probleme mit der Installation von Sass haben, sollten Sie die Dokumentation auf der offiziellen Sass-Website lesen oder sich an die Antworten in der Entwickler-Community wenden.
Erstellen einer Projektdateistruktur
Bevor Sie SASS mit HTML verbinden, ist es wichtig, die Projektdateistruktur richtig zu organisieren. Dadurch können wir unseren Code bequemer verwalten und entwickeln.
Es wird empfohlen, die folgende Ordnerstruktur zu erstellen:
1. src: In diesem Ordner werden alle Projektquelldateien gespeichert.
2. dist: Alle kompilierten Dateien, die für die Produktion bereit sind, werden in diesen Ordner kompiliert und übertragen.
3. css: in diesem Ordner werden CSS-Dateien gespeichert, die aus SASS-Dateien erstellt werden.
4. sass: In diesem Ordner werden alle SASS-Dateien des Projekts gespeichert. Es wird empfohlen, sie für jede Komponente oder jedes Modul in separate Dateien aufzuteilen.
5. js: in diesem Ordner werden die JavaScript-Dateien des Projekts gespeichert.
6. img: In diesem Ordner werden die im Projekt verwendeten Bilder gespeichert.
Die Projektstruktur kann komplexer sein und hängt von den spezifischen Anforderungen und Vorlieben des Entwicklers ab.
Durch das Erstellen einer solchen Struktur können wir das Projekt leichter navigieren und die SASS-Verbindung mit HTML schnell und präzise anpassen. Der nächste Schritt besteht darin, SASS-Dateien zu kompilieren und sie mit HTML-Dateien zu verbinden.
Importieren von Sass-Dateien
Verwenden Sie die Direktive, um Sass-Dateien in andere Sass-Dateien zu importieren @import. Es ermöglicht Ihnen, mehrere Dateien zu einem zu kombinieren und ihre Stile an den richtigen Stellen zu verwenden.
Zunächst müssen Sie eine Master-Sass-Datei erstellen, die die Importdirektiven für die anderen Dateien enthält. Erstellen Sie beispielsweise eine Datei mit dem Namen styles.scss:
@import 'variables';@import 'reset';@import 'header';@import 'footer';
In diesem Beispiel importieren wir vier Sass-Dateien: variables.scss, reset.scss, header.scss, footer.scss. Beachten Sie, dass wir die Dateierweiterung in den Importdirektiven nicht angeben – Sass sucht automatisch nach Dateien mit der Erweiterung .scss.
Es ist wichtig, die Importreihenfolge der Dateien beizubehalten, da die Stile in der Reihenfolge angewendet werden, in der sie angegeben sind. Zum Beispiel, wenn in einer Datei variables.scss einige Variablen sind definiert, sie müssen verfügbar sein, bevor sie in den Dateien verwendet werden, die danach folgen.
Eine Master-Sass-Datei, die Importdirektiven enthält, kann mithilfe eines Tags in eine HTML-Datei importiert werden . Zum Beispiel:
Auf diese Weise werden alle in den importierten Dateien definierten Stile auf das HTML-Dokument angewendet.
Erstellen grundlegender Projektstile
Um ein stilvolles und modernes Projekt zu erstellen, müssen Sie die Hauptstile definieren, die auf allen Seiten verwendet werden sollen. In diesem Abschnitt erfahren Sie, wie Sie eine Hauptstildatei in einem Projekt erstellen und anfügen.
Schritt 1: Erstellen einer Stildatei
Der erste Schritt besteht darin, eine Stildatei für das Projekt zu erstellen. Es wird empfohlen, die Erweiterung zu verwenden .sass oder .scss für die Stylesheet-Datei, um die Sass-Syntax zu verwenden.
Schritt 2: Verbinden einer Stildatei
Nachdem Sie die Stildatei erstellt haben, müssen Sie sie mit der HTML-Seite verbinden. Dazu innerhalb des Tags head fügen Sie die folgende Zeile hinzu:
Hier styles.css - dies ist der Pfad zu Ihrer Stildatei. Stellen Sie sicher, dass Sie den richtigen Dateipfad angeben.
Schritt 3: Grundlegende Stile schreiben
Nachdem die Stildatei nun mit dem Projekt verbunden ist, können Sie mit dem Hinzufügen grundlegender Stile beginnen. Sie können beispielsweise die Hintergrundfarbe, Schriftart, Elementgrößen und vieles mehr definieren. Ein Beispiel:
font-family: Arial, sans-serif;
Sie können alle Stile hinzufügen, die Sie für Ihr Projekt für erforderlich halten.
Verwenden von Sass-Variablen
Um eine Variable in Sass zu deklarieren, wird das Zeichen "$" vor dem Variablennamen verwendet. Um beispielsweise eine Variable für die Haupthintergrundfarbe zu deklarieren, können Sie den folgenden Code verwenden:
Nachdem Sie eine Variable deklariert haben, können Sie ihren Wert in CSS-Regeln verwenden. Um beispielsweise die Haupthintergrundfarbe für ein Element festzulegen body Sie können den folgenden Code verwenden:
body <
background-color: $primary-color;
>
Dieser Ansatz erleichtert das Ändern des Farbschemas der Website. Es genügt, den Wert der Variablen $primary-color zu ändern, und alle Elemente, die diese Variable verwenden, erhalten automatisch eine neue Hintergrundfarbe.
Zusätzlich zu den Farben können Sie Sass-Variablen verwenden, um Größen, Schriftarten und andere Werte festzulegen, die auf der Seite wiederholt werden. Dadurch wird die Menge an Code erheblich reduziert und die Wartung vereinfacht.
Es ist wichtig zu beachten, dass beim Kompilieren von Sass in CSS Variablen in normale CSS-Eigenschaften konvertiert werden und der Wert der Variablen durch den direkten Wert ersetzt wird. Auf diese Weise verbleiben keine Informationen über die Variable mehr im endgültigen CSS-Code.
Durch die Verwendung von Variablen in Sass können Sie flexiblere und leicht unterstützte Stile für Websites erstellen. Dies ist einer der Hauptgründe für die Beliebtheit des Präprozessors bei Entwicklern.
Mixins in Sass schreiben
Zum Erstellen eines Mixins verwendet Sass das Schlüsselwort @mixin , gefolgt von dem Namen des Mixins und seinen Argumenten in Klammern. Lassen Sie uns zum Beispiel einen Mix erstellen, der die Schriftart und Größe des Textes festlegt:
@mixin text-styling($font-family, $font-size)
In diesem Beispiel haben wir einen Mix mit dem Namen "text-Styling" erstellt, der zwei Argumente verwendet: $font-family und $font-size. Innerhalb des Mixins setzen wir einfach den Wert der Eigenschaften font-family und font-size auf die übergebenen Argumente.
Um einen Mix zu verwenden, können wir ihn mit dem Schlüsselwort @include aufrufen und die Argumentwerte übergeben:
Jetzt haben alle Absätze auf der Seite die Schriftart Arial und eine Größe von 14 Pixeln.
Mixins in Sass können auch Standardwerte für Argumente haben. Dazu müssen Sie beim Deklarieren des Mixins einfach die Argumentwerte festlegen:
@mixin text-styling($font-family: "Arial", $font-size: 14px)
Jetzt können wir Mixin verwenden, ohne Argumente zu übergeben, und in diesem Fall werden die Standardwerte angewendet:
Dies ist sehr praktisch, wenn Sie allgemeine Stile haben, die Sie auf mehrere Elemente anwenden möchten, und Sie müssen nicht jedes Mal die gleichen Argumentwerte übergeben.
Die Mixins in Sass bieten ein leistungsfähiges Werkzeug für die Wiederverwendung von Code und die einfache Verwaltung von Stilen. Sie ermöglichen es, den Code modularer zu gestalten, ihn zu unterstützen und die Entwicklungseffizienz zu verbessern.
Arbeiten mit Verschachtelung in Sass
Sass bietet ein leistungsfähiges Verschachtelungstool, mit dem Sie Ihren CSS-Code organisieren und strukturieren können. Die Verschachtelung in Sass ermöglicht es Ihnen, besser lesbaren und modularen Code zu schreiben, wodurch es einfacher zu pflegen und zu ändern ist.
Um verschachtelte Stile in Sass zu erstellen, können Sie ein Symbol verwenden > oder +. Symbol > ermöglicht es Ihnen, nur die Elemente auszuwählen, die direkte Nachkommen sind, während das Symbol + wählt Elemente einer beliebigen Verschachtelungsebene aus. Zum Beispiel können Sie alle Absätze innerhalb eines Blocks mit der Klasse "container" wie folgt auswählen:
.container >
Die Verwendung von Verschachtelung reduziert die Menge an Code erheblich und macht ihn strukturierter. Auch in Sass können Sie ein Symbol verwenden & um auf das übergeordnete Element des Selektors zu verweisen. Sie können beispielsweise Stile für Referenzen angeben, die sich innerhalb eines Blocks mit der Klasse "menu" befinden:
.menu >>
Dieser Code wird in das folgende CSS kompiliert:
.menu a .menu a:hoverSo funktioniert etwa Sass mit Verschachtelung. Es ermöglicht Ihnen, lesbaren und strukturierten Code zu erstellen, wodurch er leichter zu verstehen und zu ändern ist.
Anwenden von Operatoren in Sass
Sass bietet eine breite Palette von Operatoren zum Ausführen verschiedener arithmetischer Operationen und Vergleiche. Die Operatoren in Sass erleichtern das Arbeiten mit Zahlen, Farben und Strings.
Arithmetische Operatoren:
Vergleichsoperator:
Anwendungsbeispiele:
$width: 10px + 5px; // результат: 15px$height: 20px - 8px; // результат: 12px$total: 2 * 4; // результат: 8$result: 20px / 4; // результат: 5px$isEqual: 10px == 10px; // результат: true$isLess: 8px < 10px; // результат: true$isGreater: 15px >= 10px; // результат: trueOperatoren können auch zum Arbeiten mit Farben und Linien verwendet werden.
Beachten: die Operatoren in Sass haben je nach Datentyp ein spezifisches Verhalten. Zum Beispiel der Additionsoperator + kann zum Kombinieren von Strings und zum Addieren von Zahlen und Farben verwendet werden.
Kompilieren von Sass in CSS
Um Sass in Ihrem Projekt zu verwenden, müssen Sie die Sass-Dateien in normale CSS-Dateien kompilieren.
Es gibt mehrere Möglichkeiten, Sass zu kompilieren:
- Verwenden des Befehlszeilentools
- Verwenden einer Sass-fähigen Entwicklungsumgebung
- Verwenden von Online-Compilern
Die gängigste Methode ist die Verwendung eines Befehlszeilentools. Um Sass über die Befehlszeile in CSS zu kompilieren, müssen Sie Sass auf Ihrem Computer installieren und den Befehl sass watch verwenden, der die Änderungen an der Datei automatisch überwacht und bei jedem Speichern in CSS kompiliert.
Wenn Sie lieber mit der GUI arbeiten möchten, können Sie eine Sass-fähige Entwicklungsumgebung wie WebStorm, Visual Studio Code oder Sublime Text verwenden.
Wenn Sie keine Möglichkeit haben, ein Programm auf Ihrem Computer zu installieren oder einen schnellen Weg bevorzugen, können Sie Online-Compiler verwenden, mit denen Sie Sass-Dateien herunterladen und den kompilierten CSS-Code als Antwort erhalten können.
