Sehen und kompilieren Sie Sass in fünf schnellen Schritten

Was Sie erstellen werden

Sass ist vielleicht der bekannteste CSS-Pre-Prozessor. Seit Jahren hilft es uns, sauberes, wiederverwendbares und modulares CSS zu schreiben. In diesem kurzen Tutorial werde ich direkt auf das Wesentliche eingehen und erklären, wie Sass mithilfe der Befehlszeile in CSS kompiliert wird.

1. Installieren Sie Node.js

Um Sass über die Befehlszeile zu kompilieren, müssen Sie zuerst node.js installieren. Laden Sie es von der offiziellen Website nodejs.org herunter, öffnen Sie das Paket und folgen Sie dem Assistenten.

2. NPM initialisieren

NPM ist der Node Package Manager für JavaScript. NPM vereinfacht die Installation und Deinstallation von Drittanbieterpaketen. Um ein Sass-Projekt mit NPM zu initialisieren, öffnen Sie Ihr Terminal und Ihre CD (Verzeichnis wechseln) in Ihrem Projektordner.

Zum Sass-Projektordner navigieren

Führen Sie den Befehl im richtigen Ordner aus npm init. Sie werden aufgefordert, einige Fragen zum Projekt zu beantworten, woraufhin NPM eine package.json Datei in Ihrem Ordner.

3. Installieren Sie Node-Sass

Node-sass ist ein NPM-Paket, das Sass in CSS übersetzt (was auch sehr schnell geschieht). Um Node-sass zu installieren, führen Sie den folgenden Befehl in Ihrem Terminal aus: npm install node-sass

4. Schreiben Sie den Befehl Node-sass 

Alles ist bereit, ein kleines Skript zu schreiben, um Sass zu kompilieren. Öffnen Sie die package.json-Datei in einem Code-Editor. Sie werden so etwas sehen:

"name": "sass-tutorial", "version": "1.0.0", "description": "", "main": "index.js", "scripts": "test": "echo \ "Fehler: Kein Test angegeben \" && exit 1 "," author ":" "," license ":" ISC " 

In dem Skripte Abschnitt hinzufügen ein scss Befehl unter der Prüfung Befehl, wie unten gezeigt:

"scripts": "test": "echo \" Fehler: Kein Test angegeben \ "&& exit 1", "scss": "node-sass --watch scss -o css"

Gehen wir diese Zeile Wort für Wort durch. 

1. Knoten-Sass: Bezieht sich auf das Node-sass-Paket.
2. --sehen: Eine optionale Flagge, die "alles beobachten" bedeutet .scss Dateien in der scss / Ordner und kompilieren Sie sie bei jeder Änderung neu. “
3. scss: Der Ordnername, in den wir alle unsere .scss-Dateien ablegen.
4. -o css: Der Ausgabeordner für unser kompiliertes CSS.

Wenn wir dieses Skript ausführen, wird es alle sehen .scss Datei in der scss / speichere die kompilierte css in css / Ordner jedes Mal, wenn wir einen ändern .scss Datei.

5. Führen Sie das Skript aus

Um unser einzeiliges Skript auszuführen, müssen wir den folgenden Befehl im Terminal ausführen: npm run scss

Und voila! Wir beobachten und komponieren SASS.

Sass-Schnelltipps

Bleiben Sie dran für mehr Sass-Schnelltipps. es ist eine ganze sammlung unterwegs!