Working with CSS preprocessors in Chrome

Posted on by Elliot Jackson

From the Chrome Developer blog:

For preprocessors that support CSS source maps, DevTools lets you live-edit your preprocessor source files in the Sources panel, and view the results without having to leave DevTools or refresh the page. When you inspect an element whose styles are provided by a generated CSS file, the Elements panel displays a link to the original source file, not the generated .css file.

Very handy. Chances are, you're already using a preprocessor that supports source maps; the most popular ones being Sass, Less, and Stylus.

Posted in Chrome and CSS