Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Es existieren verschiedene Desktop-Anwendungen um Ruby und/oder Sass zu installieren, ohne dabei den Weg über die Kommandozeile gehen zu müssen. Ich möchte euch in diesem Beitrag die populären Anwendungen »Scout«, »CodeKit« und »Compass.app« vorstellen. Weitere Tools findet ihr auf der Website von Sass. Damit ihr alle Beispiele in diese Beitrag nachvollziehen könnt, empfehle euch zuvor den Beitrag zum Thema Sass-Kompilierung gelesen zu haben.

Scout

Scout ist eine kostenlose Adobe Air-Anwendung für Windows und Mac. Die Software richtet sowohl Sass als auch Ruby (unter Windows) auf dem Computer ein, übernimmt die Überwachung und Kompilierung von Stylesheets und verwaltet Compass-Projekte. Im Gegensatz zu anderen Anwendungen ist der Funktionsumfang allerdings begrenzt.

Website von Scout
Website von Scout

Scout installieren und verwenden

Die Installation von Scout ist unkompliziert. Ladet euch hier die Setup-Datei für Windows oder OSX herunter und folgt dem Installationsprozess. Ich zeige die Einrichtung am Beispiel von Windows – die Unterschiede am Mac sind sehr gering.

Installations-Wizard von Scout unter Windows 7
Installations-Wizard von Scout unter Windows 7
Installations-Wizard von Scout unter Windows 7

Startet nach der Installation die Anwendung, sofern sich Scout nicht bereits automatisch geöffnet hat. Ihr werdet mit folgender Benutzeroberfläche begrüßt:

Scout ohne Projekte
Scout ohne Projekte

Um mit Sass arbeiten zu können, müsst ihr einen Ordner von Scout überwachen lassen. Klickt zunächst auf das Plus-Icon (+) in der unteren linken Ecke. Wählt anschließend einen Ordner aus oder erstellt einen neuen Ordner. Scout richtet den Ordner nun als Projekt ein und zeigt ihn auf der linken Seite an.

Auf der rechten Seite von Scout seht ihr den Abschnitt »Stylesheet Directories«. Wählt hier einen »Input-Folder« aus. In diesem Ordner müssen später die SCSS-Dateien liegen. Anschließend wählt ihr den »Output-Folder«. In diesen Ordner speichert Scout die kompilierten Stylesheets. Die Ordner dürfen auch identisch sein.

Scout mit einem eingerichteten Demo-Projekt
Scout mit einem eingerichteten Demo-Projekt

Erstellt innerhalb des gewählten »Input-Folders« eine Datei namens demo.scss und fügt folgenden Inhalt ein:

div {
  width:400px - 200px;
}

Anschließend klickt ihr in Scout auf den Play-Button neben dem Namen des Projektordners. Nun überwacht Scout den Ordner und kompiliert die SCSS-Datei, sobald ihr eine Änderung vornehmt. Im »Output-Folder« liegt dann eine entsprechende CSS-Datei.

Solltet ihr nach dem Klick auf den Play-Button die Fehlermeldung »Argument Error #3214« erhalten, installiert eine aktuelle Version von Java. Anschließend sollte das Problem behoben sein.

Scout mit geöffnetem Log-Fenster
Scout mit geöffnetem Log-Fenster

Das kompilierte CSS-Dokument hat folgenden Inhalt:

div {
  width:200px;
}

CodeKit

CodeKit ist eine kostenpflichtige, allerdings sehr empfehlenswerte Software für den Mac. Das Tool kompiliert neben Sass auch andere Präprozessoren wie LESS, Stylus oder HAML.

CodeKit verwaltet Sass-Projekte, übernimmt das Neuladen des Browsers bei Änderungen am Quellcode, bietet Zugriff auf weitere Frameworks wie Compass, Bourbon, Bootstrap oder Foundation und übernimmt auf Wunsch die Einrichtung des Projekts mit Hilfe von Bower und Co. Häufig benutzte Scripte wie jQuery oder Modernizr können mit einem Klick zum Projekt hinzugefügt werden.

CodeKit komprimiert Grafiken, Stylesheets und JavaScripte, fasst mehrere Dateien zusammen und macht den Einsatz von Vendor-Präfixen überflüssig. Für moderne Frontend-Entwicklung kann ich CodeKit sehr empfehlen. Ich selbst nutze das Tool täglich.

Die Website von CodeKit
Die Website von CodeKit

Codekit installieren und einrichten

Ladet CodeKit herunter und öffnet die Anwendung. Ihr werdet mit folgendem Bildschirm begrüßt:

Benutzeroberfläche von CodeKit
Benutzeroberfläche von CodeKit

Um einen Ordner von CodeKit überwachen zu lassen, klickt auf das grüne CodeKit-Icon oben links. Es öffnet sich das Menü zum Verwalten von Projekten.

Projekte können per Drag and Drop hinzugefügt werden
Projekte können per Drag and Drop hinzugefügt werden

Per Drag and Drop können Ordner in CodeKit abgelegt werden. Fügt einen bestehenden Ordner hinzu, oder erstellt einen neuen Ordner. Innerhalb des Demo-Ordners habe ich eine SCSS-Datei namens demo.scss mit folgendem Inhalt erstellt:

div {
  width:400px - 200px;
}

CodeKit zeigt das hinzugefügt Projekt sofort an.

CodeKit zeigt eine Liste der verwalteten Projekte
CodeKit zeigt eine Liste der verwalteten Projekte

Ein Klick auf das nun gelbe Projekt-Icon blendet die Projektverwaltung aus. Ihr seht eine Liste aller Dateien innerhalb des Projektordners – in unserem Beispiel nur die Datei demo.scss. Klickt die Datei an, um auf der rechten Seite die Einstellungen zu öffnen. Hier könnt ihr festlegen wie dieses Dokument von CodeKit behandelt werden soll.

In CodeKit kann für jede einzelne Datei festgelegt werden wie sie verwaltet werden soll
In CodeKit kann für jede einzelne Datei festgelegt werden wie sie verwaltet werden soll

Neben dem gewünschte Output-Style steht euch in der Seitenleiste u. a. auch die Wahl der Ausgabedatei (Output-File) zur Verfügung. Wie im oben gezeigten Screenshot zu sehen, wird die Datei demo.scss bei einer Änderung am Code in css/demo.css kompiliert. Ein Klick auf das kleine Icon rechts neben der Pfadangabe ermöglicht es euch, einen individuellen Ausgabeordner festzulegen.

Wenn ihr nun eine Änderung an demo.scss vornehmt, erstellt CodeKit einen neuen Ordner namens css und legt darin die Datei demo.css ab. Ihr werdet von OS X informiert, wenn die Kompilierung stattgefunden hat.

Das kompilierte Dokument enthält folgenden CSS-Code:

div {
  width:200px;
}

Innerhalb von CodeKit wird die Ansicht nach der Kompilierung der Beispieldateien ebenfalls aktualisiert.

Aktualisierte Ansicht in CodeKit nach der Kompilierung
Aktualisierte Ansicht in CodeKit nach der Kompilierung

Compass.app

Compass.app übernimmt die Verwaltung und Einrichtung von Projekten, die Überwachung von Ordnern und die Kompilierung von SASS- und SCSS-Dateien unter Windows, OSX und Linux. Die Software kostet 10 Dollar.

Compass.app dient in erster Linie der Verwaltung von Compass-Projekten lässt sich allerdings auch zur Kompilierung von reinen Sass-Projekten einsetzen. Auch andere Frameworks wie beispielsweise Bootstrap oder Foundation werden von der Anwendung unterstützt, allerdings in geringerem Umfang als es beispielsweise bei CodeKit der Fall ist.

Die Website von Compass.app
Die Website von Compass.app

Compass.app installieren und einrichten

Beachtet bitte, dass für Compass.app unter OS X die Anwendung »Growl« installiert sein muss. Ohne Growl funktioniert Compass.app nicht. Das Problem soll zwar behoben werden, zum Veröffentlichungszeitpunkt dieses Beitrags besteht es jedoch nach wie vor.

Die Installation verläuft in allen Betriebssystemen sehr ähnlich, lediglich der Zugriff auf das installierte Programm unterscheidet sich. Unter Windows greift ihr rechts unten in der Startleiste auf Compass.app zu, unter OS X greift ihr über die Menüleiste rechts oben auf Compass.app zu.

Compass.app arbeitet ohne eine echte Benutzeroberfläche. Über die Menüleiste bzw. die Taskleiste könnt ihr alle Funktionen aufrufen:

Compass.app unterstützt verschiedene Projekt-Frameworks
Compass.app unterstützt verschiedene Projekt-Frameworks

Öffnet zunächst die Einstellungen (Preferences) und legt fest, welche Sass-Syntax (SCSS/SASS) kompiliert werden soll.

Die Einstellungen von Compass.app
Die Einstellungen von Compass.app

Wenn ihr nun einen Ordner zur Überwachung auswählen möchtet, muss dieser Ordner entweder ein bestehendes Compass-Projekt sein, oder ihr passt die Ordnerstruktur wie im folgenden Screenshot gezeigt an. Die Datei demo.scss ist unser Testdokument. Die Datei kann beliebig benannt werden.

Diese Ordnerstruktur muss vorhanden sein, damit Compass.app einen Ordner überwachen kann
Diese Ordnerstruktur muss vorhanden sein, damit Compass.app einen Ordner überwachen kann

Anschließend könnt ihr den Ordner überwachen lassen:

Auswahl eines Ordners zur Überwachung mit Compass.app
Auswahl eines Ordners zur Überwachung mit Compass.app

Öffnet die Datei demo.scss und fügt folgenden Inhalt ein:

div {
  width:400px - 200px;
}

Compass.app kompiliert das SCSS-Dokument augenblicklich und legt eine entsprechende CSS-Datei im Ordner stylesheets ab. Das CSS-Dokument enthält dann folgenden Inhalt:

div {
  width:200px;
}

Wenn Compass den Ordner nicht länger überwachen soll, wählt den Menüeintrag »Stop watching«.

Die Überwachung von Ordnern kann über das Menü auch wieder gestoppt werden
Die Überwachung von Ordnern kann über das Menü auch wieder gestoppt werden

Dieser Beitrag ist ein Auszug aus unserem eBook zum Thema Sass.

Links zu diesem Beitrag:

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 5 Kommentare

  1. SASS installieren - Wordpress - IT-Traing - Marketing für Yogalehrer - Wordpress für Yogalehrer - Adobe Photoshop - Adobe Indesign - Affinity Photo - Affinity Designer
    schrieb am 09.08.2018 um 19:48 Uhr:

    […] PC:: Für denPC gibt es eine Reihe von Desktopanwendungen, die dir die Installation und das Kompilieren abnehmen. Siehe dazu diesen Link: Ruby auf dem PC installieren […]

    Antworten
  2. Moglie
    schrieb am 11.08.2016 um 15:08 Uhr:

    Hej Jonas,
    da ich viel auf dein geschriebenes Wort gebe, würde ich mich freuen von dir eine kurze Einschätzung für eine Open Source App (für erste geh versuche) zu bekommen. Bei dir wurde Scout erwähnt, oder auf die Sass Seite verwiesen welche dort noch Koala aufzeigt. Auch sind dort noch 2 weitere mit Paid/OpenSource wo ich von einer freien vereinfachten Version ausgehe.
    Welche ist zum Verstehen im ersten umgang mit Sass zu empfehlen aus deiner Sicht. Ich weis du magst es nicht gern eine App im Beitrag zu favorisieren um neutral zu bleiben – dennoch möchte ich dich diesbezüglich fragen. Absoluter neueinstieg in CSS Kompilierung.
    LG Moglie

    Antworten
    • Jonas Hellwig
      schrieb am 13.08.2016 um 15:20 Uhr:

      Hallo Moglie, ich selbst nutze CodeKit (Mac only, kostenpflichtig, aber Demo erhältlich), habe aber von sehr vielen Kollegen gehört, dass Sie gute Erfahrungen mit Prepros gemacht haben. Die App ist auch kostenpflichtig, bietet aber ebenfalls eine Demo-Version an.

      Antworten
  3. Mirco
    schrieb am 05.06.2014 um 11:29 Uhr:

    Hi Jonas,

    besten Dank für den Artikel und das Vorstellen der Apps.
    Ich würde an dieser Stelle noch die App Prepros erwähnen.
    Ich arbeite seit Anfang des Jahres mit Prepros und bin echt begeistert. Preprocessing/Compiling, Live Browser Refreshing, Multi Device Testing und einiges mehr.

    http://alphapixels.com/prepros/
    Gruß
    Mirco

    Antworten
    • Joekolade
      schrieb am 05.06.2014 um 22:42 Uhr:

      Hi Jonas,

      guter, ausführlicher Artikel, danke.

      @mirco: ich bin auch großer Fan von Prepros!
      Allerdings wenn man einen Schritt weiter geht (Grunt, Yeoman, etc.) kommt man fast nicht um die Konsole/das Terminal herum.
      http://gruntjs.com/
      http://yeoman.io/

      Ist aber auch nix wildes – finde ich.

      Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →