The DevTools docs have moved! Read the latest version of this article and head over to the new home of Chrome DevTools for the latest tutorials, docs and updates.

Working with CSS Preprocessors

Many developers generate CSS stylesheets using a CSS preprocessor, such as Sass, Less, or Stylus. Because the CSS files are generated, editing the CSS files directly is not as helpful.

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.

Elements panel showing .scss stylesheet

To jump to the source file:

  • Click the link to open the (editable) source file in the Sources panel.
  • Control+click (or Command+click) on any CSS property name or value to open the source file and jump to the appropriate line.
Sources panel showing .scss file

When you save changes to a CSS preprocessor file in DevTools, the CSS preprocessor should re-generate the CSS files. Then DevTools reloads the newly-generated CSS file.


There are a few requirements to keep in mind when working with a CSS preprocessor:

  • To use this workflow, your CSS preprocessor must support CSS source maps, specifically the Source Map v3 proposal. The CSS source maps must be built along with the CSS files, so DevTools can map each CSS property to the correct location in the original source file (for example, .scss file).

  • For the DevTools to automatically reload styles when you change the source file, your preprocessor must be set up to regenerate CSS files whenever a source file changes. Otherwise, you must regenerate CSS files manually and reload the page to see your changes.

  • You must be accessing your site or app from a web server (not a file:// URL), and the server must serve the CSS files as well as the source maps ( and source files (.scss, etc.).

  • If you are not using the Workspaces feature, the web server must also supply the Last-Modified header. The Python SimpleHTTPServer module provides this header by default. You can start a web server to serve the contents of the current directory like this:

    python -m SimpleHTTPServer

Enabling CSS source maps

CSS source maps are enabled by default. You can choose to enable automatic reloading of generated CSS files.

To enable CSS source maps and CSS reload:

  1. Open DevTools Settings and click General.

  2. Turn on Enable CSS source maps and Auto-reload generated CSS.

Using Sass with CSS source maps

To live-edit Sass files in Chrome you need to have a version past 3.3, which added support for source map generation.

gem install sass

Once Sass is installed, start the Sass compiler to watch for changes to your Sass source files and create source map files for each generated CSS file, for example:

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

CSS preprocessor support

DevTools supports the Source Map Revision 3 proposal. This proposal is being implemented in several CSS preprocessors (Updated August 2014):

  • Sass: As described above, this is supported in Sass 3.3.
  • Compass: The --sourcemap flag was implemented in Compass 1.0. Alternatively you can add sourcemap: true to your config.rb file. Demo repo here. Development notes are in issue 1108.
  • Less: Implemented in 1.5.0. See issue #1050 for details and usage patterns.
  • Autoprefixer: Implemented in 1.0. Autoprefixer docs explain how to use it, along with absorbing an input sourcemap (from another preprocessor).
  • Libsass: Implemented.
  • Stylus: Implemented. See the latest in issue #1655.

How CSS source maps work

For each CSS file it produces, the preprocessor generates a source map file (.map file) in addition to the compiled CSS. The source map file is a JSON file that defines a mapping between each generated CSS declaration and the corresponding line of the source file. Each CSS file contains an annotation that specifies the URL of its source map file, embedded in a special comment on the last line of the file:

/*# sourceMappingURL=<url> */

For instance, given an SCSS file named styles.scss:

$textSize: 26px;
$fontColor: red;
$bgColor: whitesmoke;

h2 {
    font-size: $textSize;
    color: $fontColor;
    background: $bgColor;

Sass generates a CSS file, styles.css, with the sourceMappingURL annotation:

h2 {
  font-size: 26px;
  color: red;
  background-color: whitesmoke;
/*# */

Below is an example source map file:

  "version": "3",
  "sources": ["sass/styles.scss"],
  "file": "styles.css"


Many users have developed their own workflows using CSS preprocessors. See the following external articles for tutorials and alternate workflows.