Visual studio 2015 real-time CSS editing

I was working on some updates to MenuCal this week. This morning while completing some CSS styling on a new form, I discovered that the CSS was being updated in real-time in Chrome as I made changes in visual studio. This is a huge improvement to my workflow, as I like to style and preview as I go. I was able to drag my CSS editor over to another screen and work away while the styles in Chrome updated instantly. No more hitting save, and refreshing the browser. Thank you Visual studio 2015!! I’ve seen other tools do this for quite some time, but it’s nice to see it in the IDE I use every day.

@mossyb Awesome, right, Mossy? Check this great add-in to improve the CSS coding experience in VS: https://t.co/zT7Qn8A5X6. Happy coding!

— Visual Studio (@VisualStudio) July 29, 2016

But let’s not get too excited. I mean who uses plain old CSS anymore? We’ve been using SASS on new projects and unfortunately this lovely little feature is not present out of the box for SASS. I will take a look around at VS plugins that might do that, and report back if I find some elegant solutions.

Update 2nd August, 2016: I tested out one of our projects with SCSS and Sassy Studio. While it’s not as elegant as the live CSS preview, it does detect the CSS changes after they are compiled, and the browser updates the CSS.