SASS Schnellstart – Installation & dein erstes SASS-Projekt

Sass installieren

Es gibt mehrere Möglichkeiten, Sass in deinem System zu installieren. Es gibt viele Anwendungen, die dich in wenigen Minuten mit Sass zum Laufen bringen, für Mac, Windows und Linux. Einige davon sind kostenlos, es gibt jedoch auch kostenpflichtige Apps.

Wenn du Sass auf der Kommandozeile installierst, kannst du die sass Executable ausführen, um .sass und .scss Dateien zu .css Dateien zu kompilieren. Zum Beispiel:

sass source/stylesheets/index.scss build/stylesheets/index.css

Installiere zuerst Sass mit einer der untenstehenden Optionen und führe dann sass --version aus, um sicherzugehen, dass es korrekt installiert wurde. Wenn ja, wird dies 1.27.0 beinhalten. Du kannst auch sass --help ausführen, um mehr Informationen über die Kommandozeilenschnittstelle zu erhalten.

Sobald alles eingerichtet ist, kannst du loslegen und spielen. Wenn du ganz neu in Sass bist, haben wir ein paar Ressourcen eingerichtet, die dir helfen, schnell zu lernen.

Optional: Standalone-Installation

Du kannst Sass auf Windows, Mac oder Linux installieren, indem du das Paket für dein Betriebssystem von GitHub herunterlädst und es zu deinem PATH hinzufügst. Das ist alles - es gibt keine externen Abhängigkeiten und nichts anderes, was du installieren musst.

Überall installieren mit NPM

Wenn du Node.js benutzt, kannst du Sass auch mit npm installieren, indem du folgendes in dein Terminal eingibst:

npm install -g sass

Du solltest dann ungefähr Folgendes sehen:

Beachte jedoch, dass dadurch die reine JavaScript-Implementierung von Sass installiert wird, die etwas langsamer läuft als die anderen hier aufgeführten Optionen. Aber es hat die gleiche Schnittstelle, so dass es einfach ist, später eine andere Implementierung einzubauen, wenn du etwas mehr Geschwindigkeit brauchst!

Installation auf Mac OS X oder Linux (Homebrew)

Wenn du den Homebrew Paketmanager für Mac OS X oder Linux benutzt, kannst du Dart Sass installieren, indem du folgendes in dein Terminal eingibst:

brew install sass/sass/sass

Dein erstes Sass-Projekt

Jetzt bist du gefragt. Hier ist deine erste Code-Übung:

Wir können ein SASS- oder SCSS Beispiel erstellen. Um dies zu tun, folge den folgenden Schritten.

1. Erstelle eine HTML-Datei mit dem folgenden Code:

&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Import von SASS&lt;/title&gt;
    &lt;link rel="stylesheet" type="text/css" href="style.css"/&gt;
  &lt;/head&gt;
&lt;body&gt;
  &lt;h1&gt;Sass-Beispiel&lt;/h1&gt;
  &lt;h2&gt;Hallo LerneProgrammieren&lt;/h2&gt;
  &lt;p&gt;Ich lerne SASS.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;

2. Erstelle nun eine Datei namens "style.scss". Sie ist ähnlich wie eine CSS-Datei. Der einzige Unterschied ist, dass sie mit der Erweiterung ".scss" gespeichert wird. Lege beide Dateien im gleichen Ordner ab.

Führe nun den folgenden Code aus:

sass --watch style.scss:style.css

Du solltest dann ungefähr folgendes sehen:

Es wird automatisch eine neue CSS-Datei mit dem Namen "style.css" im Hauptverzeichnis erstellt. Wann immer du die SCSS Datei änderst, wird die style.css Datei automatisch geändert.

Du kannst testweise folgenden Code in die style.scss Datei kopieren/einfügen & speichern:

h1 {
  color: #6FCCF3;
}

h2 {
  color: #1236d8;
}

Führe nun die HTML-Datei aus. Deine Eingaben wurden automatisch in die CSS-Datei übernommen.

Ausgabe:

In dieser Lektion hast du SASS installiert und in dein erstes Projekt eingebunden. Das waren die absoluten Grundlagen zu Sass. Im nächsten Modul lernst du die Sass-Syntax kennen.