Editing CSS Preprocessors in Google Chrome

By Thoriq Firdaus. in Coding. Updated on May 14, 2024.

As we have discussed in our previous post series, CSS preprocessors allow developers to write CSS using variables and functions. This flexibility makes them a preferred choice for many developers over traditional CSS.

Google introduced an experimental feature, starting from Google Chrome 29, to streamline workflow when debugging and editing CSS preprocessors. Let’s see how this feature works.

CSS Preprocessors Compared: Sass vs. LESS

There are popuplar CSS Pre-processors LESS and Sass. CSS Preprocessor primarily intends to make authoring CSS more dynamic,... Read more

Before Proceeding

First of all, we need to install Sass 3.3, which supports this feature in Chrome.

To see the Sass version installed on your computer, run the following command line in Terminal:

sass -v

As shown below, I have Sass 3.2.7 installed.

To install Sass 3.3, run the following command:

gem install sass -v '>=3.3.0alpha' --pre

Next, navigate to your project directory and run:

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

This command monitors changes within your files and creates a source map, which Chrome uses to link to the Sass file.

Don’t forget to replace the directory and filename with your own.

Enable CSS Source Map

In Chrome, navigate to chrome://flags and set the Enable Developer Tools experiments option to “enabled”. Restart Chrome.

Then, go to DevTool Settings. Under the General tab, check Enable CSS Source Map and Auto-reload Generated CSS, as shown below:

Adding a Workspace

We need to add our project directory into the Chrome Workspace. This way, Chrome will listen for and update the file whenever we make changes and save code through the DevTool Settings, as follows:

Open your project in Chrome. At this stage, you’ll notice that the stylesheet linked in DevTools is now a .scss file instead of .css, and clicking on it brings you to the Source panel.

To link the source with what we’ve added in the Workspace, right-click and select Map to File System Resource…

Then, choose the Sass source file.

You should now be able to debug and edit Sass through Google Chrome. Save your changes, and the result will be immediate, as demonstrated in the following animated GIF. Changes also apply to both the Sass/SCSS and CSS files.

Final Thought

With this new feature, we can now debug and edit Sass directly in the browser. However, there are two important things to note:

Currently, this feature only works for Sass. Support for Compass, LESS, and Stylus is planned for the future.
This feature is functional only when the page is accessed via the http:// protocol.