"Sass Support" in Chrome Dev Tools

We continue to learn the available tools in Chrome Dev Tools. Workspace and Snippets were yesterday , today Sass support is on the waiting list.

Training

As always, we install the latest version of Chrome Canary so that everything works as expected. After that, go to the magic chrome page : // flags / # enable-devtools-experiments and enable support for " Developer Tools experiments ", if this has not been done yet. Restart the browser.

In the settings -> Experiments, check the box " Sass stylesheet debugging ". Restart the browser again.

')
Now go to Settings -> General -> Sources and make sure that there is a tick next to the item " Enable source maps ", otherwise it will not work. You can also customize the CSS reload time after saving the Sass file.


Leave the browser for a while and go to your favorite console. We will need to install Sass version 3.3.0 alpha , because it is in this version support for Source Maps has been added (or in Russian from bullgare ). This is done by the command:

gem install sass --pre 

If you start to swear that you need to listen to version 0.7.0 , then the following command will help:

 gem install listen -v 0.7.0 

Run Sass

Go to the working directory of the project and run Sass with constant viewing of files for changes. Be sure to pass the --sourcemap parameter. And in the same place we specify the necessary Sass and CSS files. For example:

 sass --watch --sourcemap main.scss:main.css 

We return to the browser. Most likely, it will need to be restarted, for the last time. Now open our project and see the result. Selectors should now be displayed indicating the line on which they are located in the Sass file.

What about Less?

And in Less, there is no normal support for Source Maps, when all the "mappings" are in a separate file, so it will not work in recent versions of Chrome. If someone has found a way to generate a map file for Less - share in the comments, please.

Useful hint : Ctrl + Click on the name of any CSS property will open the Sass file exactly on the line on which this property is declared.

Conclusion

Make your CSS more Sassy. All nice coding!