One of the new features in Sass 3.3 is source maps. We can use it to improve the debugging of our Sass code and other things. I'll talk about how to enable it in your browser and the advantages of source maps.
Introduction
Before Sass 3.3, the debugging of our styles code was difficult. We can't see our code in the browser, so if we see an error in our layout, we can only see the CSS file with the line of the error. In most cases, this information are not good enough.
Another example is Coffeescript. Like Sass, Coffeescript compile .coffee files into .js files, if you have an error in your .js file, you have to see the line of your js, and then, find the .coffee file which contains that line. The problem gets worse if you minify this js (using Uglify for example).
Source maps prevents this problem giving us the method to see in our browser's developer tools the Sass code instead of our compiled css code. It's very useful in my opinion.
Generating source maps
First of all, remember that you can use Source maps only with Sass 3.3+. Please update your gem before.
gem update sassThen, the easiest method is adding a flag in your command line:
sass sass/layout.scss:stylesheets/layout.css --sourcemapThe output file (layout.css) you'll notice that a comment has been added to the end:
/*# sourceMappingURL=layout.css.map */This comment points to an additional file that was created in compilation (layout.css.map). This new file maps all the compiled CSS to the source Sass declarations. This article explains the details of this file: javascript sourcemaps.
If you are using Grunt, the contrib plugin has a new feature inside its options.
grunt.initConfig({
sass: {
dist: {
options: {
sourcemaps: auto
},
files: {
'main.css': 'main.scss',
}
}
}
});If you want to disable sourcemaps, you only set the value none in sourcemaps option.
Enabling source maps in your browser
The second thing we need to do to take advantage of source maps is to make sure that our browser knows look for them.
Safari
Safari has not need configuration. If it detects a source map file, it automatically changes the references in its console.
Firefox
In Firefox, open the developer tools, and click in Style editor tab. Then, right click in one .css file and select Show original sources to see the sass files.
Firebug does not have support for source maps yet.
Chrome
In Chrome, first open the console, then click in the settings icon (the gear) on the right. And finally, enable the Enable CSS source maps checkbox.
