SASS mit Hilfe von Scout unter Windows 10 installieren und einrichten

19. Oktober 2016 Ralf Dreiundzwanzig Open Source, SASS Schlagwörter: Scout 0 Kommentare

CSS alleine kann Spaß machen aber Stylesheets werden größer, komplexer und schwieriger zu warten. An dieser Stelle kann ein Preprocesser helfen. SASS lässt dich Funktionen nutzen die in herkömmlichen CSS bislang nicht existieren. Variablen, Verschachtelung, Mixins, Vererbung und andere Annehmlichkeiten machen CSS Entwicklung wieder angenehmer.

Nachteile von normalem CSS

CSS kann schnell unübersichtlich werden
- Eigenschaften wiederholen sich häufig
- CSS wird oft doppelt geschrieben
- Selektoren können extrem lang werden
CSS umständlich bei einer Änderung von grundsätzlichen Angaben
keine einheitliche Formatierung (einzeilig, zweizeilig)
Performanceeinbußen bei Importen von weiteren CSS-Dateien

Warum SASS/SCSS

Vorteile gegenüber CSS?

grundsätzliche Vorgaben (z.B. Farben, Größen usw. können zentral definiert werden)
SASS kann rechnen (z.B. Farben, Größen und Abstände)
einmal eingetragene Eigenschaften können immer wieder benutzt werden
der Compiler optimiert die CSS-Datei (Selektoren werden gruppiert usw.)
der Compiler prüft auf korrekte Syntax, erkennt Fehler
Importe von anderen SCSS/SASS-Dateien übernimmt der Compiler, somit keine Performanceeinbußen

Es existieren verschiedene Desktop-Anwendungen um SASS zu installieren, ohne dabei den Weg über die Kommandozeile gehen zu müssen. Ich möchte euch in diesem Beitrag die Anwendung »Scout« vorstellen.

Scout

Scout ist eine kostenlose Open Source Anwendung für Windows, Linux und Mac. Die Software richtet SASS auf dem Computer ein, übernimmt die Überwachung und Kompilierung von Stylesheets.

Scout installieren

Die Installation von Scout ist unkompliziert. Ladet euch hier die Datei herunter und folgt den Installationsschritten. Ich zeige die Einrichtung am Beispiel von Windows 10.

Entpackt die Zip-Datei in ein Verzeichnis und startet aus dem Verzeichnis

Ihr könnt euch auch eine Verknüpfung auf dem Desktop erstellen.

Nach dem Start könnt ihr eure GitHup Projekte importieren

oder bestehende Quellen einfügen. Ich bevorzuge Add Project oder bei bestehenden Quellen File New Project

Um mit Sass arbeiten zu können, müsst ihr einen Ordner von Scout überwachen lassen. Klickt zunächst auf File und New Project. Wählt anschließend einen Ordner aus. Scout richtet den Ordner nun als Projekt ein und zeigt ihn auf der linken Seite an.

1 _s ist mein Projekt
2 _s mein Projekt mit Ordner / Verzeichnis
3 C:/xampp/htdocs/_s/sass sind die Quellen von dem Theme _s
4 wählt einen »Output-Folder«
5 Optionen

Anschließend wählt ihr den »Output-Folder«. In diesen Ordner speichert Scout die kompilierten Stylesheets.