SASS mit Hilfe von Scout unter Windows 10 installieren und einrichten

Hinweis: Um sich diesen Artikel vorlesen zu lassen, klicken Sie auf den Player im Artikel.

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.

Links

Scout-App
GitHub
mein Projekt

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Ich bin dir für jede Unterstützung dankbar!

Download PDF