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

 

Should read 02 / 2014

Und wieder eine Liste mit interessanten Links über die ich im Monat Februar gestolpert bin.

JavaScript Puzzlers! or: do you really know JavaScript? (or: how insane do you think JavaScript actually is?)
http://javascript-puzzlers.herokuapp.com/

What Nobody Told You About Sass’s @extend
http://www.sitepoint.com/sass-extend-nobody-told-you/

CSS Regions Module updated
http://www.w3.org/blog/CSS/2014/02/18/css-regions-level-1-working-draft-updated/

A great little tool that helps you estimate how well a combination of Web technologies is supported on mobile.
http://onmobile.iwanttouse.com/

Should read 01 / 2014

Ich stöbere so gerne und daher anbei ein paar Links über die ich im Laufe des Monats gestolpert bin und für sehr lesenswert halte.

Ein interessanter Artikel über responsive Images

So, You’re Writing A Responsive Images Script
http://filamentgroup.com/lab/respimg_scripts/

Eine Case-Study zum Thema Frontend Performance

We spent a week making Trello boards load extremely fast. Here’s how we did it.
http://blog.fogcreek.com/we-spent-a-week-making-trello-boards-load-extremely-fast-heres-how-we-did-it/

Sind CSS Regions wirklich so cool?

CSS Regions Considered Harmful
http://alistapart.com/blog/post/css-regions-considered-harmful

Wie ist das noch mal mit nativem JavaScript

A Dive Into Plain JavaScript
http://blog.adtile.me/2014/01/16/a-dive-into-plain-javascript/

Vertikel Zentrierung ist ein Problem ohne Tables? Nein!

Vertical align anything with just 3 lines of CSS
http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

So klappts auch mit den Icon Fonts

Bulletproof Accessible Icon Fonts
http://filamentgroup.com/lab/bulletproof_icon_fonts/

Neue Features von Sass 3.3 verheiratet mit der BEM Syntax

Sass 3.3 @at-root & BEM!
http://blog.unakravets.com/post/64113156740/sass-3-3-at-root-bem