Die Entwicklung von Webanwendungen ist zu einer unglaublich beliebten Aktivität geworden, und viele Entwickler sind bestrebt, die effektivsten Tools und Technologien zu finden, um stilvolle und flexible Websites zu erstellen. SASS (Syntactically Awesome Style Sheets) ist ein leistungsstarker CSS-Präprozessor, der viele Funktionen und Verbesserungen für die Arbeit mit CSS-Code bietet.
Wenn Sie Visual Studio Code als primäre Entwicklungsumgebung verwenden, können Sie SASS einfach mit Ihren HTML-Dateien verbinden. Dadurch können Sie CSS-Code in SASS schreiben und ihn dann zur Verwendung in Ihrer Webanwendung in normales CSS konvertieren.
Um SASS in Visual Studio Code mit HTML zu verbinden, müssen Sie das Live Sass Compiler-Add-On installieren. Diese Erweiterung kompiliert Ihre SASS-Dateien automatisch in CSS, wenn Sie sie speichern. Es bietet auch Funktionen zum Nachverfolgen und automatischen Neukompilieren von Dateien, wenn sie sich ändern.
Sobald Sie den Live Sass Compiler installiert haben, müssen Sie ihn für Ihr Projekt konfigurieren. Erstellen Sie dazu eine Datei .vscode/settings.json im Stammverzeichnis Ihres Projekts. Geben Sie in dieser Datei den Pfad zu Ihrer SASS-Datei und den Pfad zur gewünschten CSS-Datei an. Dann öffnen Sie Ihre HTML-Datei und fügen Sie Ihre CSS-Datei wie gewohnt ein.
Einstieg
Bevor Sie SASS in einer HTML-Datei verwenden können, müssen Sie sicherstellen, dass die folgenden Komponenten installiert sind:
- Node.js
- npm (wird mit Node geliefert.js)
Nachdem Sie diese Komponenten erfolgreich installiert haben, können Sie mit der Installation von SASS fortfahren. Sie müssen eine Eingabeaufforderung oder ein Terminal öffnen und den folgenden Befehl ausführen:
npm install -g sass
Mit diesem Befehl wird SASS global auf Ihrer Maschine installiert, sodass Sie es aus jedem beliebigen Verzeichnis verwenden können.
Nach der Installation von SASS können Sie Ihre erste Stildatei mit der Erweiterung erstellen .scss oder .sass. Sie können beispielsweise eine Styles-Datei erstellen.scss, in dem Sie Ihre Stile schreiben werden.
Jetzt können Sie Ihre Stylesheet-Datei an eine HTML-Datei anhängen. Dazu müssen Sie dem Head-Abschnitt Ihrer HTML-Datei das folgende Element hinzufügen:
Beachten Sie, dass anstelle von styles.sie müssen den Pfad zu Ihrer kompilierten CSS-Datei angeben, die nach dem Ausführen des SASS-Build-Befehls erstellt wird.
Jetzt verwendet Ihre HTML-Datei die Stile von Ihrer .scss oder .sass-Datei.
In den folgenden Abschnitten werden wir die Arbeit mit SASS in Visual Studio Code genauer betrachten und sie so konfigurieren, dass sie automatisch in CSS kompiliert wird.
Installieren von Visual Studio Code
Um Visual Studio Code herunterzuladen, müssen Sie auf die offizielle Website der Entwickler über den Link gehen: https://code.visualstudio.com /.
Auf der Hauptseite der Website werden Versionen von Visual Studio Code für verschiedene Betriebssysteme angeboten. Wählen Sie die Version aus, die Ihrem System entspricht, und klicken Sie auf den "Download" -Button.
| Windows | Linux | macOS |
Nachdem Sie die Installationsdatei heruntergeladen haben, müssen Sie sie ausführen und den Anweisungen des Installationsprogramms folgen. Der Installationsvorgang erfordert normalerweise keine besonderen Einstellungen und dauert einige Minuten.
Nach erfolgreicher Installation können Sie Visual Studio Code ausführen. Der Editor bietet eine benutzerfreundliche Oberfläche, Unterstützung für verschiedene Programmiersprachen und die Möglichkeit, Plugins hinzuzufügen, um die Funktionalität zu erweitern.
Jetzt können Sie mit Visual Studio Code beginnen und es zum Entwickeln von Websites mit angeschlossenem SASS verwenden.
Installieren des SASS-Plugins
Um SASS mit HTML in Visual Studio Code zu verbinden, müssen Sie das SASS-Plugin installieren, das die SASS-Sprache im Editor unterstützt. Befolgen Sie dazu die Anweisungen:
- Öffnen Sie Visual Studio Code.
- Klicken Sie auf das Symbol "Erweiterungen" in der linken Seitenleiste oder verwenden Sie Strg+Umschalt+X.
- Geben Sie in das Suchfeld "SASS" ein und drücken Sie die Eingabetaste.
- Wählen Sie das Plugin "Sass" vom Entwickler "Robin Bentley" aus und klicken Sie auf die Schaltfläche "Installieren".
Nach der Installation des Plugins unterstützt Visual Studio Code SASS und bietet die Möglichkeit, SASS beim Speichern der Datei automatisch in CSS zu kompilieren. Jetzt sind Sie bereit, SASS in Ihrem Projekt zu verwenden!
Erstellen eines Projekts
Bevor Sie SASS mit HTML in Visual Studio Code verbinden können, müssen Sie ein Projekt erstellen, das alle erforderlichen Dateien enthält.
Öffnen Sie zunächst Visual Studio Code, und erstellen Sie einen neuen Ordner, in dem sich Ihr Projekt befindet. Sie können den Ordner beliebig benennen, hauptsache es ist ein sinnvoller Name.
Nachdem der Ordner erstellt wurde, öffnen Sie ihn in Visual Studio Code. Wählen Sie dazu im Programm "Datei" - "Ordner öffnen" und wählen Sie den Ordner Ihres Projekts aus.
Jetzt müssen Sie mehrere Dateien erstellen, die im Projekt verwendet werden sollen. Eine davon sollte die Haupt-HTML-Datei sein, mit der Ihr Projekt beginnt. Sie können eine Datei mit einer Erweiterung erstellen .html und benennen Sie es so, wie Sie möchten. Diese Datei ist der Einstiegspunkt für Ihr Projekt.
Außerdem benötigen Sie eine Stildatei mit einer Erweiterung .ein SCSS, der Ihren gesamten SASS-Code enthält. Sie können diese Datei erstellen und sie beliebig benennen. Sie müssen auch eine Datei mit der Erweiterung erstellen.css, das den kompilierten CSS-Code basierend auf Ihrem SASS-Code enthält.
Nachdem alle erforderlichen Dateien erstellt wurden, können Sie mit dem Verbinden von SASS mit HTML in Visual Studio Code beginnen.
Dateierstellung
Um SASS mit HTML in Visual Studio Code zu verbinden, müssen Sie mehrere Dateien erstellen:
- index.html - die Haupt-HTML-Datei, die die Stile aus SASS verbindet;
- style.scss - SASS-Datei, in der die Stile für die HTML-Seite geschrieben werden;
- style.css - die CSS-Datei, die das Ergebnis der Kompilierung der SASS-Datei sein wird.
Erstellen Sie einen neuen Projektordner und erstellen Sie darin Index-Dateien.html, style.scss und style.css mit dem Code-Editor in Visual Studio Code oder einem anderen Texteditor.
Hinweis: Sie können die Dateinamen beliebig auswählen, aber beachten Sie, dass die Datei style ist.scss muss in eine Style-Datei kompiliert werden.css.
Verbinden von SASS mit HTML
Um SASS in einer HTML-Datei zu verwenden, müssen Sie zuerst SASS installieren und das Projekt konfigurieren.
- 1. Installieren von SASS:
- Der erste Schritt ist, SASS zu installieren. Dies kann durch die Installation von SASS mit npm (node package manager) erfolgen. Öffnen Sie dazu eine Eingabeaufforderung und führen Sie den folgenden Befehl aus: npm install -g sass
- 2. Erstellen einer SASS-Datei:
- Nachdem Sie SASS installiert haben, erstellen Sie eine neue Datei mit der Erweiterung .scss. Dies wird Ihre SASS-Quelldatei sein, in die Sie Ihre Stile schreiben werden.
- 3. Kompilieren einer SASS-Datei:
- Nachdem Sie die SASS-Datei erstellt haben, müssen Sie sie in CSS kompilieren, damit der Browser sie verstehen kann. Um eine SASS-Datei in CSS zu kompilieren, führen Sie den Befehl an der Eingabeaufforderung aus: sass --watch style.scss:style.css Wo style.scss ist der Pfad zu Ihrer SASS-Quelldatei und style.css ist der Pfad zu Ihrer kompilierten CSS-Datei.
- 4. Eine kompilierte CSS-Datei mit HTML verbinden:
- Nachdem Sie Ihre SASS-Datei kompiliert haben, müssen Sie sie an Ihre HTML-Datei anhängen. Verwenden Sie dazu ein Tag mit einem href-Attribut, das auf den Pfad zu Ihrer kompilierten CSS-Datei verweist:
Jetzt sollten Ihre SASS-Stile auf Ihre HTML-Datei angewendet werden.
Erstellen eines Projekts und Verwenden von SASS
Um SASS in einem Projekt zu verwenden, müssen mehrere Schritte ausgeführt werden. Stellen Sie sicher, dass Sie Node installiert haben, bevor Sie beginnen.js und Visual Studio Code.
1. Erstellen Sie in Ihrem Projekt einen Ordner, in dem sich die SASS-Dateien befinden. Nennen Sie es "sass" oder einen anderen bequemen Namen.
2. Öffnen Sie Visual Studio Code, und öffnen Sie diesen Ordner. Öffnen Sie in VS Code ein Terminal (View > Terminal) und führen Sie den folgenden Befehl aus:
3. Öffnen Sie nach dem Ausführen des Befehls die package-Datei.json, das im Projektordner erstellt wurde. Fügen Sie im Abschnitt "scripts" die folgende Zeile hinzu:
"build": "sass sass/style.scss style.css"
4. Installieren Sie nun SASS mit dem Befehl:
npm install sass --save-dev
5. Um SASS zu verwenden, erstellen Sie eine Style-Datei.scss" im Ordner sass. In dieser Datei können Sie Code in SASS schreiben.
6. Verwenden Sie den Befehl, um SASS in CSS zu kompilieren:
Der Befehl kompiliert die style-Datei.scss" und wird einen "style erstellen.css" im Stammordner des Projekts.
7. Um SASS automatisch in CSS zu kompilieren, wenn Dateien geändert werden, verwenden Sie den Befehl:
sass --watch sass/style.scss style.css
Jetzt können Sie die CSS-Datei "style" verwenden.css" in Ihrem HTML-Projekt.
Auf diese Weise haben Sie SASS erfolgreich in Ihrem Projekt angeschlossen und verwendet.
