Using CSS source maps to debug your code

Most Sass projects merge and compile code from multiple source files into a single CSS file. This CSS file has also been minified in most cases. When you are inspecting the source of CSS files with the developer tools of your browser, you cannot relate the style effects to your original Sass code. CSS source maps solve this problem by mapping the combined/minified file back to its unbuilt state.

Getting ready

This recipe requires only the Ruby Sass compiler to be installed. Read the Installing Sass for command line usage recipe of Chapter 1, Getting Started with Sass, to find out how to install the Ruby Sass compiler. Use a command-line editor, such as VIM, to edit your Sass files. Refer to the Writing our code in a text editor recipe of Chapter 1, Getting Started with Sass, to read more about editing your Sass files. Finally, you will need a modern browser with support for the source map protocol. Both Google Chrome and Firefox support source maps...