How to use Sass in Visual Studio 2013 [closed]

Answer 1

In Visual Studio 2013 SP 4 there is no problem adding a SCSS file and syncing on every save. I got confused when syncing failed, I found the problem was using a variable before it was defined. The SCSS file doesn't show any error but sync fails.

This works for sync:

$body-main: 45px;
body {
    padding-top: $body-main + 25px;
    padding-bottom: $body-main - 5px;
}

This doesn't work for sync

body {
    padding-top: $body-main + 25px;
    padding-bottom: $body-main - 5px;
}
$body-main: 45px;

In the second case there are no errors and intellisense works, but sync fails.

Answer 2

Last version of Visual Studio + last version of Web Essentials http://vswebessentials.com/download allows to use Sass and Less out of the box.

Answer 3

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 4

for ASP.NET there is a couple of ways to do integrate with SASS. Chripy is a common plug-in this is something you want to install in visual studio as an extension.
and thus design time compilation , you can find out more about chripy in http://chirpy.codeplex.com/ ,
as well as there is another package you can install via Nuget :

install-package SassAndCoffee

Answer 5

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 6

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.