Komm zur PHP Usergroup haben Sie gesagt…

So am 10. April ist es soweit. Ich halte einen kleinen Vortrag über Responsive Web Design (http://www.meetup.com/PHP-Usergroup-Duesseldorf/events/168388312/)

Wie es dazu kam? Der @andygrunwald hat mich gefragt:

“Willst Du nicht einen kleinen Vortrag über RWD bei der Usergroup halten? Da kommen nur so ca. 10-15 Leute und die kennst du auch alle!”

“OK das kann ich machen”

Und nun? Es haben sich weit über 50 Leute angemeldet! … !!!

Halte einen Vortrag bei der  PHP Usergroup haben Sie gesagt…

Sass 3.3 und die Sourcemaps

Man hat ja lange drauf gewartet, aber seit Version 3.3 unterstützt Sass endlich die Sourcemaps.

CSS Sourcemaps erlauben dem Browser das via pre-processor generierte CSS zurückzumappen auf die Original Quelldateien. So ist es möglich zu sehen, welche Variable oder welches Mixin für ein bestimmte Zeile CSS verantwortlich ist.

Das ganze lässt sich mittlerweile schön mit der neusten Chrome-Version in den Developertools aktivieren und man kann das CSS direkt inline in den Dev-Tools editieren, speichern und anschließend automatisch das CSS neu laden lassen.

Hier ein kleines How-To:

1. Man braucht Sass 3.3

$ gem install sass

2. In den Chrome Dev-Tools Sass debugging und auto-reload aktivieren (Unter General)

Bildschirmfoto 2014-03-23 um 12.38.53

3. Sass watcher starten

Bildschirmfoto 2014-03-23 um 12.45.461

4. Dev-Tools öffnen

Bildschirmfoto 2014-03-23 um 12.47.21

Man sieht direkt dass statt einer CSS die Source-Datei als Quelle angeben wird

5. Inline-Editing

Bildschirmfoto 2014-03-23 um 12.47.33111

Nun ändert man nach Belieben den Code

6. Speichern und Auto-Reload

Bildschirmfoto 2014-03-23 um 12.48.50

Nachdem man die geänderte Datei gespeichert hat (beim ersten Mal muss man Chrome mitteilen wo die Quelldatei auf der Platte liegt) wird das CSS durch den Watcher neu generiert und das CSS automatisch im Hintergrund neu geladen.

Ziemlich geiler Scheiß, oder?

Beitragsbild:
www.flickr.com/photos/positdesign/7410805524