How to use Sass in Visual Studio 2013 [closed]

Question

How can I use the Sass CSS preprocessor in Visual Studio 2013? Are there any extensions that provide support for Sass?

Answer 1

I wrote a blog post on this topic that I feel may help others. Basically SCSS is supported but not the SASS extension.

http://pwkad.wordpress.com/2014/05/30/using-scss-in-visual-studio-2013-with-web-essentials-starring-compass-and-susy/

Also be careful as I have run in to a few problems compiling Compass such as in the compass/css3/images file there were breaking errors.

Answer 2

I think the Web Essentials extension - which I'd assume every web dev is running and is sort of a precursor to native VS IDE support - has SCSS compilation support, but I think it only works with VS2013 Update 2 which is in CTP still at this time.

Answer 3

My comment is probably useless as people may already have an answer, but Scout is available for windows :), I have been using in my projects since March 2013.

You could use Mixture, really powerful and creates minified version of your CSS and JS files.

Answer 4

To compile SCSS in Visual studio, install the CompileSass Visual Studio Extension.

Unfortunately Web Essentials isn't going to support compiling Sass anymore.

I thought this was pretty sad because it was absolutely the simplest way to compile Sass from Visual Studio. I created a new Visual Studio extension that behaves the same way. You just install the extension and it will automatically compile .scss files to compressed .min.css files when you save.

Check out CompileSass.

Answer 5

I haven't used Chripy but there are a couple of other options you can try too.

1. My favorite extension for working with Sass in Visual Studio is Mindscape's Web Workbench. It's well integrated, works with Visual Studio 2013 and it even supports Compass. If you use Less or CoffeeScript it will take care of those as well. I've chatted with one of the developers too and he was really responsive and friendly which is a huge plus in my book. Oh, and I hear more cool things are in the works too.
2. SassyStudio is another possibility but it didn't seem as powerful as Web Workbench when I tried it.
3. It isn't out yet but keep an eye on Web Essentials. At the moment it only supports LESS in terms of CSS preprocessors but Sass support has gotten a ton of requests and the program manager replied that "Development underway full throttle." Hopefully soon!

The last option and the one I fall back on a lot of time is just using an external tool watch my SASS files, compile them in the background and let Visual Studio reload the CSS files as they're compiled.

Installing Ruby and SASS via command line and telling it to watch your project directory for changes works fine — but I adore Prepros for this kind of thing.

I haven't tried them all but Scout, Koala, LiveReload, Compass.app and Fire.app are also similar options.

While these aren't always the right solutions for every project they give you a lot of flexibility and maturity that you won't necessarily find in Visual Studio extensions yet.

I hope that helps!