Posted on by & filed under Content - Highlights and Reviews, Programming & Development.

code A guest post by Joe Lennon, a technology leader from Ireland who works for Core International, one of Ireland’s leading enterprise software companies, where he leads the technology and engineering teams. He is the author of two books, Beginning CouchDB and the forthcoming HTML5 in Action, and can be reached at @joelennon.

In my previous two posts, I introduced you to the concept behind JavaScript Source Maps. With developers writing more and more code at the front-end, it has become standard practice to minify and compress front-end source code. This also extends to Cascading Style Sheets (CSS) – especially when you are using one of the increasingly popular CSS preprocessing libraries such as Sass, LESS or Stylus. As a result, compiled CSS code suffers from the same drawbacks as its JavaScript counterpart – it’s difficult to correlate the compiled source back to the original uncompressed development code. With CSS Source Maps, this problem is a thing of the past.

Compiling CSS code with Sass

In this post, I’ll cover building CSS Source Maps from SCSS source files using Sass. To use Sass you will need Ruby installed on your machine, so be sure to grab that if you don’t already have it. Source map support is not yet available in the production release of Sass, so you’ll need to install an alpha version to build them. To install the Sass RubyGem, use the following command:

Let’s create a simple example application to see the advantages of CSS Source Maps. First, create a new file named index.html and add these contents to it:

Next, create an SCSS file named app.scss and add the contents of the folowing code to it. This code uses numerous Sass features such as variables, nesting and mixins:

At the terminal, navigate to the directory where you have stored these files, and use the following command to compile the SCSS code into a compressed CSS file named app.min.css.

If you open the index.html file in Chrome, you should see the example in action, like this screenshot:


If you inspect the circle, you will notice that the code shown is the CSS output rather than the SCSS source code. Also, as the file is compressed, it references the rule as being on line number 1, ruling out using Dev Tools to discover where in your source code you can find a specific style rule. This is illustrated here:


Let’s see how we can make this a non-issue by providing a source map for this code.

Building a Source Map for your SCSS code

It is really straightforward to build a Source Map for SCSS code using Sass. Back at the terminal prompt, enter the following command (notice the --sourcemap flag):

This will create the compressed CSS output file as before, but it will add the following code to it:

It will also create a new file named If you look at the code in this file, it should look something like the following:

If you reload the index.html page in Chrome, this time when you inspect the circle you will see the CSS code referenced with the correct line numbers in the original .scss file. Clicking on the link to this file will open it right there in Developer Tools:


As you can see, using CSS Source Maps makes it much easier to work with CSS preprocessors such as Sass, as you can now easily navigate to specific parts of your original source code from the inspector in the browser.


In my three posts, I have given you a brief introduction to how Source Maps are making the lives of front-end developers easier by improving the experience of debugging and inspecting compiled client-side JavaScript and CSS code. Source Maps enable us to take advantage of emerging languages and frameworks like CoffeeScript and Sass, without suffering the consequences when it comes to debugging the compiled code. The tooling around client-side Web development is evolving at a rapid pace right now – let’s hope the browser vendors have no intention on slowing down any time soon.

Read Joe’s first post and his second post on Source Maps.

See below for Source Map and Sass resources from Safari Books Online.

Not a subscriber? Sign up for a free trial.

Safari Books Online has the content you need

Smashing CoffeeScript is a full-color, practical book that explains CoffeeScript language, syntax, and processes, and Source Maps, and will soon have you producing concise and quality code. Ultimately, you’ll create RIAs and mobile apps faster, with less hassle.
Sass and Compass for Designers explains everything you need to get Sass and Compass installed, mastered, and making your life easier. There will be no perplexing terminology or baffling syntax left unexplained. We’ll get you set up and then build a site together, step by step, using the incredible power of Sass and Compass.
Sass and Compass in Action is the definitive guide to stylesheet authoring using both Sass and Compass through a series of examples that address common pain points associated with traditional stylesheet authoring. The book begins with simple topics such as CSS resets and moves on to more involved topics such as grid frameworks and CSS3 vendor implementation differences.

Tags: CoffeeScript, Compass, CSS, Ruby, Sass, SCSS, Source Maps,

Comments are closed.