Editing CSS Preprocessors in Google Chrome

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

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.

Current Sass version is 3.2.7

To install Sass 3.3, run the following command:

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

Sass 3.3 installation completed

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.

Command monitoring file changes

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.

Enabling Developer Tools experiments

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

Sass settings in DevTool

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:

Linked SCSS file

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.

Add Workspace in Chrome

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

Mapping to file system resource

Then, choose the Sass source file.

Choosing 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.

Editing Sass in Chrome GIF

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.