Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Sass & Compass Source Maps
#1
Dem ein oder anderen wird Sass ein Begriff sein. An dieser Stelle möchte ich Sass nicht ausschweifend erklären, sondern hauptsächlich auf Sass Source Maps zu sprechen kommen.
Source Maps erleichtern das Debuggen von Code (JavaScript & CSS) enorm, da in den Dev Tools nicht nur die Zeile in der verwendeten Datei angezeigt wird, sondern auch die Zeile in der Quelldatei (z.B. Sass, CoffeeScript oder einzelne JS-Dateien).

[Bild: sass-source-maps.png]
Screenshot Google Chrome Dev Tools mit Sass Source Maps:
Sass fügt alle Sass-Dateien in eine main.css Datei zusammen. Trotzdem wird angezeigt, dass .ym-wrapper in der Sass-Datei _responsive.scss in Zeile 29 definiert wurde.


Kurz zu Sass:

Sass ist eine Meta-Sprache für CSS, welche CSS um viele Funktionen erweitert. So können in Sass Variablen verwendet werden, damit man z.B. Farben schnell ersetzen kann. Auch Funktionen und Mixins (vergleichbar mit Snippets) können in Sass verwendet werden.
Sass-Dateien müssen dann in CSS-Dateien kompiliert werden, damit diese vom Browser interpretiert werden können.

Kurz zu Compass:

Compass erweitert Sass um weitere nützliche Features. So kann Compass automatisiert CSS-Sprites aus Einzelgrafiken erstellen, was sehr nützlich sein kann. Hinzu kommen einige weitere Features wie das Auslesen von Breite und Höhe von Grafiken, so dass man diese Werte direkt in CSS verwenden kann.

Was sind Source Maps?

Source Maps kommen ursprünglich aus dem JavaScript-Bereich.
Sie dienen dazu, dass man zusammengefasste Scripte beim Debuggen in Browser Dev Tools wieder auf die jeweiligen Ursprungsdateien zuordnen kann.

Artikel zu Source Maps bei html5rocks.com

Source Maps für Sass und Compass

Auch in Sass gibt es nun die Möglichkeit Source Maps zu nutzen. Aktuell unterstützt meines Wissens nach nur der Google Chrome (ab Version 24) Source Maps in den Dev Tools und Firefox über die Erweiterung FireSass, welches wiederum eine Erweiterung für Firebug ist.

Während man im Firefox lediglich die beiden Erweiterungen installieren muss, benötigt der Google Chrome ein paar wenige manuelle Anpassungen:

1. Experimentelle Developer Tools aktivieren:
Gibt man in die Adressleiste chrome://flags ein, so gelangt man in einen Konfigurationsbereich. Dort sucht und aktiviert man Enable Developer Tools experiments. Ein Neustart von Chrome ist nun erforderlich.

2. Source Maps aktivieren:
Nach einem Neustart findet man in den Chrome Developer Tools unter Einstellungen (Klick auf das kleine Zahnrad rechts unten) eine Option Enable source maps, welche man aktivieren muss:

[Bild: enable-source-maps-2.png]

3. Sass-Unterstützung aktivieren
Ebenfalls in den Developer Tools findet man unter dem Reiter Experiments mit der Option Support for Sass, welche man ebenfalls aktivieren muss:

[Bild: support-for-sass-2.png]

Der Browser ist nun vollständig für Sass Source Maps gerüstet. Nun müssen nur noch kleine Anpassungen an der config.rb von Compass vorgenommen werden.
Dort ergänzt man folgende Zeilen:

    RUBY Programming
  1. sass_options = { :debug_info => true }
  2. output_style = :expanded


Auch wenn der Output Style per default expanded ist, so habe ich die Erfahrung gemacht, dass man diesen dennoch in der config.rb angeben muss.

Nun empfiehlt es sich mit
    BASH Programming
  1. $ compass clean

den Compass Cache zu leeren, damit auch alle CSS-Dateien neu geschrieben werden.

Sass Source Maps ohne Compass

Wer nur Sass verwendet, der kann die für Source Maps notwendigen Sass Debug Infos über den Parameter --debug-info auf Kommandozeilen-Ebene aktivieren.
Auch in Tools wie LiveReload oder CodeKit sollte es möglich sein diesen Parameter zusätzlich anzugeben.

Source Maps für Sass und Compass mit Grunt

Grunt ist ein auf Node.js basierendes Build-Tool mit vielen Plugins. Einer davon ist grunt-compass von Kahlil Lechelt, welchen ich sehr für Compass und Sass in Verbindung mit Grunt empfehlen kann.

Die Konfiguration sähe in der Gruntfile dann wie folgt aus:
    JAVASCRIPT Programming
  1. ...
  2. compass: {
  3. dev: {
  4. src: 'sass',
  5. dest: 'css/dev',
  6. outputstyle: 'expanded',
  7. linecomments: true,
  8. forcecompile: false,
  9. debugsass: true,
  10. images: 'img'
  11. },
  12. prod: {
  13. src: 'sass',
  14. dest: 'css/prod',
  15. outputstyle: 'compressed',
  16. linecomments: false,
  17. forcecompile: true,
  18. debugsass: false,
  19. images: 'img'
  20. }
  21. },
  22. ...


Ich verwende hier zwei verschiedene Grunt-Tasks für eine Entwicklungs-Version (dev) mit Sass Source Maps und eine Produktiv-Version (prod) als komprimiertes CSS ohne Source Maps.

Meine vollständige Gruntfile findet man auch in meinem persönlichen Kickstarter auf github.

Viel Erfolg beim Verwenden der Sass Source Maps! Mir hat es eine erhebliche Erleichterung beim Debuggen von CSS gebracht.
Wenn es Fragen dazu gibt, dann könnt ihr diese gerne hier als Antwort loswerden.

Viele Grüße
Michael Schulze
Webentwickler & Designer

http://michsch.de
http://michs.ch/twitter
Zitieren
#2
Danke für deine Anleitung, das sieht sehr interessant aus. Werde mir das die nächsten Tage mal genauer anschauen.
Zitieren
#3
Update - Kommando zurück (vorerst):

Der aktuelle Stable-Chrome unterstützt nur noch Source Maps, die in einer .map-Datei ausgelagert sind. Vorher hat der Chrome dafür allerdings auch die Sass Debug-Infos ausgelesen, was er jetzt nicht mehr macht.

Sass kann diese Map-Dateien allerdings erst ab Version 3.3.0 erstellen, welche derzeit noch alpha ist. Nutzt man nur Sass und nicht Compass, dann kann man sich mit der Alpha behelfen.
Möchte man allerdings Compass und/oder Grunt nutzen, dann wird es schon leicht kritisch. Das geht zwar theoretisch wohl auch, aber wirklich unterstützen tun weder Compass noch aktuelle Grunt-Plugins die neue Sass-Source-Maps-Funktionalität.
Das ist auch verständlich, wo diese selbst erst in der Sass-Alpha enthalten ist. Ich gehe auch nicht davon aus, dass diese netten Gui-Helferlein á la CodeKit hier schon eine Unterstützung bieten.

Man hat momentan also nur folgende Möglichkeiten:
  • Firefox mit FireSass nutzen
  • Sass 3.3.0 Alpha ohne Compass oder Grunt
  • Sass 3.3.0 Alpha und viele Tests mit Alpha-Versionen von Compass & Co. (nicht lustig!)

Weitere Infos kann man sich z.B. bei Github einholen:
Compass Issue 1108 bei Github

Viele Grüße
Michael Schulze
Webentwickler & Designer

http://michsch.de
http://michs.ch/twitter
Zitieren
#4
Update - Erfolg mit 3.3.0 Alpha und eigenem Grunt Task:

Mit Sass 3.3.0 (3.3.0.alpha.121) konnte ich Source Maps erfolgreich testen. Das funktioniert dann sogar mit Compass (0.12.2). Wichtig ist dabei, dass man Compass bei der Stable Version belässt und dort keine Alpha installiert.

Ohne Compass kommt man mit Sass 3.3.0 so zu Source Maps:
    BASH Programming
  1. $ sass --sourcemap --watch sass:css



Mit Compass 0.12.2 dann so:
    BASH Programming
  1. $ sass --compass --sourcemap --watch sass:css



Ich habe mir dafür außerdem einen kleinen (experimentellen) Grunt-Task geschrieben:
Sass Source Maps Grunt Task
Michael Schulze
Webentwickler & Designer

http://michsch.de
http://michs.ch/twitter
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste