14 DAY TRIAL // Google Chrome's recently introduced feature Workspaces for the dev tools could prove a great improvement in the way web developers work. It makes it possible to integrate the dev tools and Chrome itself with your tools, even if that's just a text editor.
In the very latest updates, Chrome dev tools support syntax highlighting for quite a lot of programing and scripting languages, many more than the ones Chrome can run.
Interesting among those is support for Sass. Along with the Workspaces feature, this makes it possible to change a page's style from the Chrome dev tools and have those changes pushed to the original .scss file.
This works great with network resources, but for local files a few more steps are needed, as Google explains.
"This feature generally works flawlessly if you're using DevTools Workspaces (2) with network resource mapping set up," the company explained.
"If you don’t want to rely on the mapping and prefer to save network resources locally using the 'Save As...' resource context menu item in the Sources panel, some additional configuration is required," it added.
"In order to ensure that CSS reloading occurs as expected, your HTTP server MUST send the 'Last-Modified' response header when serving the *.css and *.scss files," it explained.
Google also has some advice on setting up a HTTP server to push the 'Last-Modified' header for stylesheet files. It also points to a comprehensive tutorial on getting Chrome's dev tools to work with Sass files.
The feature is still experimental, so you need to first enable the "Developer Tools experiments" in the Chrome flags section, if it's not enabled already. Then, in the dev tools settings, go to the Experiments section and check the mark next to "Sass stylesheet debugging." Restart the dev tools and the feature should be working. In the latest Chrome Canary Build, there isn't even a need to set the "Auto-reload CSS upon Cass save" timeout.