Real-Time Theming With Chrome DevTools, Gulp, SCSS, and LiveReload

Wouldn't it be great if we could just use Chrome DevTools to inspect the page HTML we're working on locally, see the underlying and uncompiled SCSS (as we inspect elements), edit it there in the Sources window, save it back to the file system, and then see it compiled as CSS —rendered immediately in your browser without having to press the "reload" button? Well, YOU FREAKING CAN!

Why not! Back in 1997, I could use Netscape Navigator to edit HTML in the browser and see changes immediately. It's 2016, and we can do it again!

Above, I'm replacing a color variable in "_blog.scss" within Chrome DevTools. As soon as I save the file (in Chrome DevTools), gulp notices a change in my local file system to recompile my CSS and LiveReload Chrome to show me immediate results.

In this session, I'll introduce some of the deeper, dark arts of using Chrome DevTools. And there's more than one way to do this, so I'll be using Hook 42's new "Towel" theme with configurations we've developed to make all this magic possible.

Session track: 
Session skill level: 
Session speaker(s):