Chrome Development Tool uses CSS preprocessors

Use the CSS preprocessor

Many developers use CSS preprocessors to produce CSS style sheets, such as Sass, Less, or Stylus. Because CSS files are generated, it is useless to modify CSS files directly.

For preprocessors that support CSS source mapping, DevTools allows you to edit preprocessor source files in real time in the source panel without leaving DevTools or refreshing the page to see the results. When you review the style elements provided by the generated CSS file, the element panel displays a link to the source file instead of .css file.

If you want to jump to the source file:

• Click the link in the source panel to open (editable) the source file.
• Control on the CSS property name or property Command can open the source file and jump to the appropriate line by clicking the left mouse button (or using the Command plus left mouse button on the Mac).

When you save changes to the CSS preprocessor through DevTools, the CSS preprocessor rebuilds the CSS file. DevTools then reloads the newly generated CSS file.

Changes made in the external editor are not detected by DevTools unless the relevant source files contained in the Source tab regain focus. Also, manual editing of CSS files generated by Sass/LESS/other compilers will break the association of the source map until the page is reloaded.

If you're using Workspaces, you need to verify that the resulting files are mapped to Workspace. You can view and validate CSS originating locally in the tree to the right of the source panel.

Requirements

There are a number of requirements to meet when using CSS preprocessors:

• If you want to use this workflow, your CSS preprocessor must support CSS source mapping, especially the source mapping v3 protocol. C SS source mapping must be established with the CSS file, so DevTools can map each CSS property to the correct location in the source file. (e.g., .scss file)
• In order for DevTools to automatically load styles when you change the source file, your preprocessor must be set to regenerate the CSS file when the source file changes. Otherwise, you won't be able to see the changes after they take effect until you manually create a new CSS file and reload the page.
• You must access your site or app from the web server (not a URL similar to file://), and the server must be able to support CSS files as well as source map (.css .map) and source files (.scss).
• If you do not use the features of the workspace, the web server must also be able to provide the last modified header. Python SimpleHTTPServer provides this header by default. You can start a web service like this to service the current directory:

python -m SimpleHTTPServer

Enable CSS source mapping

By default, CSS source mapping is enabled. You can choose whether you want to enable automatic reloading of the generated CSS file mode.

If you want to enable CSS source mapping and overload CSS files, refer to the following steps:

• Open the DevTools settings and tap General .
• Open Enable CSS source maps and Auto-reload generated CSS.

Use CSS source mapping to use Sass

To edit Sass files in real time in Chrome, you need Sass over 3.3, because that's the only way to support source mapping.

gem install sass

When Sass is installed, turn on the Sass compiler to monitor changes to your Sass source files and create source mapping files for each resulting CSS file, such as:

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

CSS precompiler support

DevTools supports Source Map Revision 3 Proposal. This protocol is implemented in several CSS precompilers (updated in August 2014):

• Sass: As mentioned above, supported after Sass 3.3.
• Compass : --sourcemap tags are in use after Compass 1.0. Y ou can add sourcemap: true to the config.rb file to choose whether to enable it or not. H ere's a demo for reference. The development log is at issue 1108.
• Less: Starts at 1.5.0. Refer to the #1050 for more information and usage patterns.
• Autoprefix: Starts in 1.0. Autoprefixer docs explain how to use it and how to receive an input source map (from another preprocessor).
• Libsass : Detailed .
• Stylus: Supported, see #1655.

How the source map works

For each generated CSS file, the preprocessor also generates a source mapping file (.map) for the compiled CSS. T he source map is a JSON-formatted file that defines each generated CSS declaration and the corresponding line map in the original file. The last line of each CSS file contains a special comment that describes the path to its source file.

/*# sourceMappingURL=<url> */

For example, given a CSS file .css styles:

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

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

Sass generates a .css file and adds a comment on the source file path map later:

h2 {
  font-size: 26px;
  color: red;
  background-color: whitesmoke;
}
/*# sourceMappingURL=styles.css.map */

Here's an example of a source mapping file:

{
  "version": "3",
  "mappings":"AAKA,EAAG;EACC,SAAS,EANF,IAAI;EAOX,KAAK"
  "sources": ["sass/styles.scss"],
  "file": "styles.css"
}

Reference resources

Many developers form their own workflows as they use CSS preprocessors. For tutorials and alternate workflows, refer to the following article:

• Getting Started with CSS sourcemaps and in-browser Sass editing
• Faster Sass debugging and style iteration with source maps, Chrome Web Developer Tools and Grunt

Note: External resources may not be material about the latest version of Chrome.

The above applies to CC-By 3.0 license