Sass Source Maps in Chrome

Over the last few years there has been some major advancements in the tooling we use on a day-to-day basis but one feature that really took things to the next level was the introduction to CSS source maps.

CSS source maps allow the browser to map CSS generated by a pre-processor back to the original source file.

Setting up source maps only takes a couple of minutes in Chrome and gives your editing workflow less friction to enable you to develop quicker.


Running time: 4:06

Download demo files

Commands used in video:


sass -v

sudo gem update sass

sass --watch --sourcemap sass/styles.scss: css/styles.css

python -m SimpleHTTPServer

2 Comments

  1. Great short watch Jake.

    One of those things I’ve been meaning to setup but haven’t got round to!

    Awesome that it works with variables too!

  2. At last! Good for the Chrome and Sass teams! Thanks for showing this to us mate!

This post currently has 2 responses. What do you think?

You can use basic HTML when posting code, please turn all < characters into &lt; or > into &gt;
If the code is multi-line, use <pre><code></code></pre>

Leave a Reply

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