sass – Daniel Koskinen

In Firefox, viewing the original SASS line number directly has been possible using Firebug and FireSass. Similar, or even better functionality has very recently arrived in the stable release of Chrome. I just tried this out and it works wonderfully. See here for instructions:

How to make Chrome understand the SASS/SCSS in your rails app

Don’t worry about the Rails stuff, these instructions work just as well for stand-alone SASS. If you’re using Compass like me, you need to set sass_options = {:debug_info => true} in the config.rb file of your project.

If you look at your css files after doing the above, you’ll see they are quite a mess. From a comment by Paul Irish in the above post I learnt better stuff is on its way thanks to the upcoming SASS 3.3, and Source Map support in Chrome:

Debugging SASS with Source Maps

Exciting times!

Both SASS and LESS are really nice tools for CSS developers. Both have the ability to nest selectors like this:


#header {
   h1 { font-size: 3em }
   p { font-size: 1.2em }
}

…which compiles to


#wrapper h1 { font-size: 3em }
#wrapper p { font-size: 1.2em }

Nesting is really useful, just don’t go more than 2-3 levels deep. I’m currently wading through a bunch of code which was generated from LESS files, and the (huge) stylesheet is full of selectors like this:

html body #wrapper #header #access div.menu-header ul.menu li.menu-item-home.current-page-item a:link { ... }

You have been warned!

Tag: sass

Debugging SASS in Chrome

SASS, LESS and nesting overload