The A List Apart Blog Presents:

Finding Your Way with Sass Sourcemaps

Article Continues Below

The next version of Sass recently hit release candidate status, meaning it’ll be out in the wild any day now. There are some great changes coming in Sass 3.3, one of which should have developers extremely excited: sourcemaps.

Put plainly, sourcemaps are a way to map compiled code back to its native state. That may sound kind of odd, but sourcemaps will make every Sass-loving developer’s life a little bit better. Browsers that understand the generated map file will know where each and every line of code came from, down to the line number in the original Sass file, rather than the line number from the compiled CSS file.

Even in the pre-release state, sourcemaps are proving to be a big productivity boost for developers by cutting down debug time and making Sass code easier to optimize and improve. No need to wait for Sass 3.3 to be released officially: install the release candidate and try it out in your own projects!

6 Reader Comments

  1. @Cat: Yep! All it does is generate a {filename} file alongside the rendered {filename}.css file. In the header of the CSS file, there is a comment directing browsers where to look for the sourcemap file.

    @Sang-Min: Awesome, hadn’t seen that! Looks great for Firefox users.

Got something to say?

We have turned off comments, but you can see what folks had to say before we did so.

More from ALA

Cross-Cultural Design

In this excerpt from Cross-Cultural Design, Senongo Akpem discusses the many facets of typography that must be considered when you are looking to reach a global audience.

Making Room for Variation

In this excerpt from Expressive Designs Systems, Yesenia Perez-Cruz goes deep on what it takes to create design systems that enables intentional, meaningful variation.