Enable source map config.rb

Source map is a sass 3.3 latest features that allow you to inspect the css inside the sass file directly in the web browser’s inspect element. Using source map and compiling, it will generate a new file named with an extension .map
For eg: If your css file name is style.css then in the same css directory there will be another new file created by compiler called style.css.map.

How to enable source map config.rb

Demo folder structure for sass and css.


sass/style.scss
css/style.css
css/style.css.map
config.rb

Add this line at the bottom of config.rb
sourcemap = true

This file is what you need to make source map working via compass. Now we have the required files needed to work with source map.

The second step is to activate the source map working for the browsers. Right now this is available only in chrome. In order to activate this feature in your chrome browsers you need to open the “inspect element” bar by hitting F 12 or click on mouse right button and then click on Inspect Element.

Click on the setting gear icon on the top right corner of Inspect Element. Under the “Source” tick the checkbox that says “Enable CSS source maps”

enable source map

Now edit your sass file and compile it. Go to your browser and inspect the website, you should see your sass file name coming with line numbers instead of css file.

Thank you for reading this tutorials.

Published by Santosh Shah

My name is Santosh Shah and blogs at santosh-shah.com

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.