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
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
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
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”
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.