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.
Image may be NSFW.
Clik here to view.
To install Sass 3.3, run the following command gem install sass -v '>=3.3.0alpha' --pre.
Image may be NSFW.
Clik here to view.
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.
Image may be NSFW.
Clik here to view.
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.
Image may be NSFW.
Clik here to view.
Then, go to the DevTool Settings. In General Tab, check Enable CSS Source Map and Auto-reload Generated CSS, as shown below:
Image may be NSFW.
Clik here to view.
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.
Image may be NSFW.
Clik here to view.
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.
Image may be NSFW.
Clik here to view.
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…
Image may be NSFW.
Clik here to view.
Then, select the Sass source file.
Image may be NSFW.
Clik here to view.
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.
Image may be NSFW.
Clik here to view.
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.