Editing CSS-Preprocessor in Google Chrome

As we have dicussed in our previous post series, CSS-Preprocessor allows developers to write CSS using variables and functions. This is one of the reasons many developers prefer using CSS-Preprocessor rather than writing it traditionally.

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

Recommended Reading: CSS Preprocessors Compared: Sass Vs. LESS

Before Proceeding

First of all, we need to install Sass 3.3 that has support for this feature from Chrome.

To see the Sass version that is installed on your computer, you can run the following command line through Terminal.

sass -v

In this case, as you can see below, I have Sass 3.2.7.

To install Sass 3.3, run the following command gem install sass -v '>=3.3.0alpha' --pre.

Then, navigate to project directory and run sass --watch --sourcemap scss/styles.scss:styles.css to monitor the changes within the files and create a source map, which Chrome can use to link to the Sass file.

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

Enable CSS Source Map

In Chrome, go to chrome://flags, and set the Enable Developer Tools experiments to "enabled". And restart Chrome.

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

Adding a Workspace

Then, we need to add our project directory into the Chrome Workspace, that way Chrome will be able to listen and update the file everytime we make changes and save the code through the DevTool Settings, like so.

Open your project in Chrome. In this stage, you will notice that the stylesheest that is linked in DevTools is now .scss instead of .css, and it will bring you to the Source panel when you click on it.

One last step we need is to link the source with the one that we have added in the Workspace. To do so, right Click, and select Map to File System Resource…

Then, select the Sass source file.

You should now be able to debug and edit Sass through Google Chrome. Save the changes, and the result will be instant as you can see in the following animated GIF. The changes, in addition, affect both the Sass/SCSS and CSS file.

Final Thought

With this additional feature we are now able to debug and edit Sass without leaving the browser. However, there are two major things to note at the moment.

• At the moment, this feature only works for Sass. Compass, LESS, and Stylus will be added in the future.
• This feature only works when the page is accessed through the http:// protocol.