Often I’ll be working on a design, whether as the sole designer or just as the front-end dev and I’ll add stuff to the design or tweak the design using the chrome dev tools, such as colours, font-size, shadows etc. One of the biggest frustrations is how to get these changes added into the source CSS file, add using Sass in to the mix and your problems are compounded even further, sad face.
Well, the good news is you can now use Sass with the Chrome dev tools, happy face.
To activate it you’ll first have to turn on the dev tools experiments flag, located in chrome://flags, once you’ve done that, jump back into Chrome and open up the dev tools. Click on the settings button in the lower right corner and inside there should be a tab for ‘Experiments’, finally, select ‘Support for Sass’. You’ll probably have to relaunch chrome to get everything working.
Once you have done that, you can open a local Sass project, I’ve created one for the this blog post which is just a simple headline.
I’ll talk here about using terminal for watching for changes, rather than a GUI app, to be honest I haven’t used any GUI Sass stuff so I don’t know how they differ.
To watch the sass file, you need to pass a flag into the watch command, in particular ‘debug info’.
sass --watch style.scss:style.css --debug-info
What that does is add debug info to your CSS file. Which is a filename and a line number, remember to turn this off when compiling for production code, it looks pretty nasty otherwise.
Once you’ve done that open your project in Chrome and inspect the element you what to change. You should see that Chrome is now finding the SCSS file rather than the CSS file as in the image below.
If you click on this, you’re taken into an editor. Here you can change the values and write any SASS/SCSS code you desire. To save hit ⌘S or right click and save you may have to locate the original SCSS file in your project and overwrite it, back it up incase something bad happens.
But once you do you can change anything, so you can change the font size and hit save then reload your page and your changes should be made. If you then look back in your SCSS file and CSS file the changes should also be replicated there.
If I wanted to style an anchor in the h1 and use nesting to achieve this, I can! Just do it as you would normally, and it should work.
What I find particularly cool about this is, it’s allowing you write SASS in the dev tools in browser, saving it, looking for changes, compiling and then displaying on screen. Add in some live reload and things get even better.
So, that’s it, pretty simple but very useful especially if you’re like me and using SASS on a daily basis and making changes with the dev tools as well.