Geschrieben von Christian Schnettelker

Brackets & SASS

Seit kurzem setze ich zwei neue Tools zur Webseitenentwicklung ein, die ich bereits jetzt nicht mehr missen möchte. Hier eine kurze Vorstellung:
Brackets & SASS

Brackets

Dieser moderne, quelloffene Code-Editor wurde speziell für das Erstellen von Webseiten gestaltet. Zuerst war ich skeptisch, integrierte Entwicklungsumgebungen können schnell unübersichtlich werden und zeigten in der Vergangenheit oft das Problem, dass sich Projektdateien durch Programmfehler etc. von heute auf morgen nicht mehr öffnen ließen. Meldungen wie

The file is corrupted and cannot be opened

haben mir früher leider öfters schlaflose Nächte bereitet, das brauche ich nicht mehr.

Brackets geht hier einen anderen Weg, der mir in meiner Arbeitsweise sehr entgegen kommt. Dieser Editor arbeitet auf Ordnerbasis, eine Projektdatei, die fehlerhaft („corrupted“) werden könnte, wird gar nicht erst angelegt.

Nach der Installation des Programms genügt es, über das Kontextmenü den Ordner mittels „Open as Brackets project“ zu öffnen, und man findet alle aktuell im Order enthaltenen Dateien zur Bearbeitung innerhalb einer Dateiliste im linken Bildschirmbereich – genial einfach, einfach genial!

Bisher bearbeitete ich HTML und CSS-Dateien mittels Notepad++, auch davon muss ich mich in dieser IDE nicht vollständig verabschieden, denn der Editor erlaubt die Verwendung von „Themes“ und glücklicherweise hat jemand ein Notepad++ – Theme für Brackets erstellt, sodass ich in Sachen Syntax – Highlighting nicht umdenken muss.

json – JavaScript Object Notation

Gewöhnungsbedürftig ist jedoch die spartanische Konfigurationsmethode via JSON-Dateien. Hier als Beispiel die Projekt-Konfiguration zur automatischen Kompilierung SASS (im Folgenden auch .scss-Dateien genannt) zu CSS, dazu später mehr:

{
 "sass.enabled": false,
  "path": {
  "scss/basics.scss": {
  "sass.enabled": true,
  "sass.options": {
    "outputDir": "../css/",
    "includePaths": [],
    "sourceComments": false,
    "outputStyle": "compressed"
      }
    }
  }
}

Es hat gute drei Stunden gedauert, bis ich alles kapiert hatte und Backets sich nach meinen Wünschen verhielt – c‘est la vie. Aber diese Arbeit macht man idR nur einmal und alles ist später relativ einfach, wenn man die Logik begriffen hat.

Zum Verständnis für Einsteiger: die brackets.json (ohne führenden Punkt) im Brackets-Hauptverzeichnis steuert die Konfiguration des Programmes, z.B. Schriftgröße im Editor, Wortumbruch etc.. Sie erreichen diese Datei im Menü über Debug / Einstellungsdatei öffnen.

Im persönlichen Projektordner legen Sie jeweils eine .brackets.json (mit führendem Punkt) an, in der dann z.B. obige Anweisung zur Compilierung von scss nach css steht.

Diese Aufteilung ist so einfach und für Wissende selbstverständlich, dass es niemand für nötig hält, es ausdrücklich zu erwähnen. Im Netz sprechen alle immer nur von der „brackets.json“ – ich Idiot habe diesen entscheidenden Unterschied erst nach einigen Versuchen herausgefunden.

Zweiter Tipp von mir für Einsteiger: wenn Sie eine .brackets.json-Datei zur automatischen Compilierung von SASS zu CSS (siehe oben) erstellen und mehrere Stylesheets einsetzen, ist es nach meinen Infos nicht möglich, die Kompilierung einfach für alle .scss-Dateien in einem Unterordern zu erwirken. Sie müssen, wie im obigen Beispiel, jede einzelne scss-Datei in der .brackets.json-Datei zur Kompilierung angeben. Eine Notation wie

"path": {
"scss/*.scss": {

funktioniert also leider nicht. Dies zwingt Sie indirekt dazu, den Stylesheets aller Projekte möglichst immer den gleichen Namen zu geben, damit die JSON-Datei nicht jedes mal angepasst werden muss, das ist aber idR sowieso Usus.

Korrektur

Ein Leser hat mich darauf hingewiesen, dass es doch möglich ist, alle scss-Dateien in einem Verzeichnis per Joker zur Kompilierung anzugeben. Hier ein Code-Beispiel, welches bei mir funktioniert:

{
 "sass.enabled": false,
 "path": {
   "scss/*.scss": {
   "sass.enabled": true,
   "sass.options": {
       "includePaths": [ "scss/" ],
       "imagePath": null,
       "outputDir": "../css/",
       "sourceComments": false,
       "outputStyle": "compressed"
      }
    }
  }
}

Größter Vorteil des neuen Editors für mich: ein übersichtliches, projektbezogenes Arbeiten wird unterstützt. Alle zum Vorhaben gehörenden Dateien sind übersichtlich aufgelistet und müssen nicht erst im Explorer „zusammengesucht“ bzw. zur Bearbeitung geöffnet werden.

Die meisten anderen Funktionen, beispielsweise das direkte Editieren von CSS-Code über „schnelles Bearbeiten“, benutze ich persönlich eher selten, andere werden es vielleicht lieben.

Live preview

Zweiter großer Vorteil von Brackets und absolutes „Highlight“ ist die Möglichkeit, Änderungen am HTML- und CSS-Code direkt im Browser zu sehen, ohne den Code erst per FTP hochladen und den Browser aktualisieren zu müssen.

Das funktioniert überraschend gut und ist eine fantastische Arbeitserleichterung, vorausgesetzt, man hat einen zweiten Bildschirm am Rechner angeschlossen, sonst macht es keinen Spaß.

Ab und zu kommt die Synchronisierung durcheinander oder bricht ab, aber damit kann ich leben. Im Moment funktioniert die sogenannte „Live preview“ auch nur in Google Chrome, was aber ebenfalls kein Problem sein sollte, da sicher jeder erst zu nehmende Entwickler alle heute gängigen Browser installiert haben wird.

Brackets lässt sich über „Extensions“ erweitern, einige wenige habe ich ausprobiert und tatsächlich im Einsatz. Hier gibt es allerdings auch viel „Müll“, der die so schön übersichtliche Oberfläche dann wieder kompliziert macht – hier kann und muss halt jeder selber entscheiden, was er installieren möchte.

Zwischenfazit: Sie sehen mich begeistert, Brackets arbeitet weitgehend so, wie ich es mir wünschen würde, hätte man mich vorher zu meinen Vorstellungen befragt. Hier und da gibt es wie immer ein paar Ecken und Kanten, aber mit diesen kann ich gut leben.

SASS

Den Einsatz dieses bekannten Tools hatte ich schon länger überlegt, was bis dato aber immer vor der mE komplizierten Installation und Nutzung zurückgeschreckt. Nach meinen Recherchen kommt man hier um den Einsatz der Konsole und dem Tippen von Kommandos nicht herum – das wollte ich mich ehrlich gesagt im Jahre 2015 nicht mehr dauerhaft antun.

Kurz zu SASS, dies ist eine Art „Compiler für CSS“, der es u.a. endlich erlaubt, Variablen zu nutzen. Beispielsweise kann ich die Variable

$kunden-rot: rgb(181,18,18);

innerhalb des scss-Codes definieren, im compilierten css-Code ersetzt der Compiler alle $kunden-rot – Variablen dann automatisch durch rgb(181,18,18). Der ursprüngliche Quelltext wird so übersichtlicher und eine spätere Änderung dramatisch einfacher.

Weiter kann man in SASS rechnen, z.B.

width: 640px + 60px;

und der spätere CSS-Code lässt sich automatisch komprimieren. Dabei entfallen alle Kommentare, Leerzeichen etc., was die Verarbeitung beschleunigt und es der Konkurrenz deutlich erschwert, Code auf die schnelle zu „klauen“. SASS hat noch einige andere Vorteile und Möglichkeiten, ich verweise hier auf http://sass-lang.com/.

Brackets übernimmt praktischer Weise das Anstoßen der Compilierung, nachdem der scss-Code geändert und die Änderung abgespeichert wurde, vorausgesetzt, das entsprechende projektbezogene JSON-File im aktuellen Ordner (siehe oben) ist korrekt.

Selbiges zu erstellen ist allerdings, ich erwähnte es bereits, nicht unbedingt trivial und die Logik muss erst einmal erfasst werden. Im Netz finden Sie relativ viele Infos dazu, denken Sie aber immer an den Unterschied brackets.json für Einstellungen des Editors und .brackets.json für Projekt-Definitionen.

Fazit

Ich kann jedem Webdesigner nur empfehlen, diese zwei Tools einmal zu testen – ich denke, dass viele, wie auch ich, begeistert sein werden.

SASS dürfte sowieso in „gehobenen“ Webdesigner-Kreisen häufig im Einsatz sein, Brackets hingegen ist noch relativ neu, aber in jedem Falle einen Blick wert. Nähere Infos zum Programm siehe http://brackets.io/.

Pin on PinterestShare on FacebookTweet about this on TwitterShare on Google+Share on LinkedIn

Kommentare

Kommentare

  1. Robert Hafenried schrieb:

    Hallo,
    nur eine kleine Ergänzung: Es durchaus möglich, für alle scss-Dateien in einem Verzeichnis ein Output-Verzeichnis anzugeben, z.B. so:

    „path“: {
    „owner/*.scss“: {
    „sass.enabled“: true,
    „sass.options“: {
    „includePaths“: [
    „e:/sass/owner/“
    ],
    „imagePath“: null,
    „outputDir“: “../../server/htdocs/owner/fileadmin/css/“,
    „sourceComments“: false,
    „outputStyle“: „nested“
    },

Kommentar schreiben

Allgemeiner Hinweis: Bitte kommentieren Sie zum Thema unter Vermeidung von Allgemeinplätzen und Einzeilern. Eine korrekte Rechtschreibung wird erwartet.

Hinweis für SEO-Kommentarschreiber: alle Links sind nofollow und steigern Eure Linkpopularität nicht. Die Kommentare werden moderiert, offensichtliche SEO-Kommentare nicht veröffentlicht.