SASS mit Hilfe von Scout unter Windows 10 installieren und einrichten

Open Source, SASS Schlagwörter: 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 »« 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

Scout-App starten

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

Nach dem Start könnt ihr eure GitHup Projekte importieren

githup-projekte

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

scout-app-projekt-importieren

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.

Scout App Oberfläche

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!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

* Die DSGVO-Checkbox ist ein Pflichtfeld

*

Ich stimme zu

Business Shooting

Mit dem visuellen Erscheinungsbild beginnt alles. Egal ob Du Freelancer, langjähriger Unternehmer oder Verantwortlicher eines Start-ups bist – Du musst nach außen kommunizieren, für welche Kompetenzen und Botschaften Du stehst.
Imagefördernde Fotos unterstützen ein Unternehmen dabei, sich erfolgreich und attraktiv zu präsentieren und damit neue Kunden anzusprechen.
Bei meiner Arbeit geht es mir sowohl um die ausdrucksstarke und kompetente Darstellung der Führungskräfte und Mitarbeiter als auch um die repräsentative Abbildung der Produkte.

Aktuell