SASS mit Hilfe von Scout unter Windows 10 installieren und einrichten

Open Source, SASS Schlagwörter: 0 Kommentare
Voiced by Amazon Polly

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 Anwendung für Windows, Linux und Mac. Die 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!

Wie können wir Ihnen helfen?

Sie wollen online richtig verkaufen? Wir unterstützen Sie bei der Umsetzung Ihres (AR) oder (VR) Projektes! Egal ob Produktfotografie, 3D Scan Service, 3D-Visualisierung oder fertige 3D Modelle für AR/VR – wir beraten Sie persönlich und unverbindlich.

Wünschen Sie ein individuelles Angebot auf Basis Ihrer aktuellen Vorlagen, nutzen Sie einfach unser Anfrageformular.



Gefällt Ihnen dieser Beitrag? Teilen Sie ihn mit anderen. Sie machen mir damit eine große Freude!
R23
R23

Schreibe einen Kommentar

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

Senden Sie uns Ihre Videonachricht!

Sie können im r23:Blog Ihren Textkommentar mit einer Videonachricht ergänzen! Diese Nachricht kann bis zu 90 Sekunden lang sein.

Wir freuen uns auf Sie!

Hinweis: Das r23:Blog setzt auf selbstlernende Systeme für die reale Welt.
Mit einer Künstlichen Intelligenz (KI) wird eine Abschrift von Ihrer Videonachricht erstellt.
Für ein optimales Erlebnis von r23:Blog und den dazugehörigen Applikationen wird die Verwendung von Firefox in der aktuellen Version empfohlen. Unterstützt werden weitere aktuelle Browser.

Anleitung: Videonachrichten im r23:Blog

R23

Aktuell