My Technical Notes

Sunday, 5 February 2017

Using Chrome DevTools to directly edit SASS files

This article explains how to use Chrome DevTools to directly edit SASS (SCSS) files. In other words, use Chrome DevTools as a SASS text editor.

Watching a SASS file for Changes

To watch a SASS file for changes (if your input file is `BloggerStyles.scss` we use:

sass --watch BloggerStyles.scss:BloggerStyles.css

This will regenerate the `css` file when make changes to the `scss` file. Therefore, if you made a change to your `scss` file within Chrome DevTools, your `css` file would be regenerated, and Chrome would notice that the `css` file had changed, and would reload therefore reload it.

Mapping URL Prefixes to Local Folders

The next thing we need to do, is map URL prefixes to local folders. For instance, if there was a `<link>` tag in your page pointing to:

and we wish to live-edit a `styles.scss` (the SASS file) file stored locally at:


Then Chrome needs to know that the URL prefix `` corresponds to the local folder `C:\code\mysite\css\`. Once this link is made, then you can edit `styles.scss` in Chrome and after `styles.css` is regenerated, Chrome knows to reload the css.

Below are the steps to do this mapping:

  • Within DevTools, click on the `⋮` icon then Settings.
  • Click on "Workspace" on the left, then click on "Add folder". Give the path of your local css folder. In our example above, it would be `C:\code\mysite\css\`. (DevTools asks for permissions to the folder; allow it.)
  • Next to "Mappings", click "Add". In the "URL prefix" textbox, enter the URL prefix. In the above example, it would be ``. The folder path would be just '/' as the workspace folder is where the css files are stored.


Currently, Chrome DevTools has a bug. If you edit a SASS file within the Sources tab, the changes will be persisted to disk, but they are undone within the Sources tab. I am sure they will fix this bug soon.

No comments: