How to use Sass in Visual Studio 2013

Question

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

Answer 1

Visual Studio 2013 Update 2

Visual Studio 2013 Update 2 has native syntax support for both SCSS and LESS files. You can create SCSS or LESS files and see syntax highlighting and intellisense for these file types. It does not however provide a method of compilation.

Here's a link to the blog explaining about the new features:

We added LESS in VS2013 RTM, and we now have a SASS project item and editor. SASS editor features are comparable to LESS editor, include colorization, variable and Mixins IntelliSense, comment/uncomment, quick info, formatting, syntax validation, outlining, goto definition, color picker, tools option setting etc.

Please note: This update seems to support the newer SassyCSS syntax only. I've tried getting it to work with the older indented SASS syntax without any success.

Compilation

• Web Essentials. This is a great tool which does all the 'grunt' work for you. Newer versions of Web Essentials are available for Visual Studio 2013 Update 3, 4 and 5.
• Another free one that just handles compilation is CompileSASS this also works in VS2015.
• Alternatively you could use MindScape's WebWorkbench, which is a great tool with lots of nice features. There is a free version which does just about enough to get by but there is also a paid version which is far more comprehensive (but in my opinion a little too expensive considering there is a better free alternative).

---

Visual Studio 2015

For those of you moving to Visual Studio 2015, unfortunately there is still no native support for SASS and LESS compilation. And unfortunately Web Essentials will no longer be supporting compilation either. The author of Web Essentials (Mads Kristensen) explains the reason for this decision here.

Here are a list of extensions that can handle compilation:

WebCompiler (FREE)

Mads Kristensen (the author of web essentials) has created a standalone compilation tool called Web Compiler. All you have to do is install it, then right click on any of the SASS files you want to compile and select Web Compiler > Compile File. From that point on it is watched and anytime it is saved, the file will be compiled.

Download Web Compiler

CompileSASS (FREE)

Similar to Web Compiler this is a standalone extension that was created to work in both VS2013 and VS2015 because compilation was removed from the popular Web Essentials extension. It's lightweight and does the job very well with great error reporting. Read the author's blog about the extension here.

Download Compile SASS

Web Workbench (FREE/PAID)

Mindscape's Web Workbench was my favourite extension for many years when compiling SASS but I have since moved away in favour of the free alternatives. Still, the Pro version is a powerful tool with many ways to customise the outputted files but it is also quite expensive ($39) considering there are free tools out there.

Download Web WorkBench

---

Visual Studio Code

Same deal as above really, it has native support for SASS and LESS through syntax highlighting and Intellisense but lacks compilation.

Any of the compilers outlined above will work but if you wanted to set up compilation manually here is a brilliant guide:

https://code.visualstudio.com/Docs/languages/css

Answer 2

For anyone else looking for an answer to this, I'm posting to save you time as some of the answers are a little out of date.

Whilst working on a small web project in Visual Studio 2013, I wanted to use SASS for the first time. I did some digging and discovered VS 2013 Update 2 was released with native support for SASS (.scss) files.

After a bit more digging, and with no experience of using SASS, I installed Web Essentials 2013 for Update 2 that is used to compile and generate the corresponding .css files.

Even still, I wasn't clear on how it all tied together, but this blog post did a great job of explaining everything for a first timer.

Snippets From Blog (Credit to @akatakritos)

1. Visual Studio 2013 provides the ability to add SASS files (.scss)
2. Install Web Essentials 2013 for Update 2
3. Add a new .scss file to your project, e.g. styles.scss
4. Update styles.scss, save, and it will auto generate a styles.css file under the .scss file
5. You can then bundle or link it like a regular .css file

UPDATE July 2015:

In a later Web Essentials update, namely: Version 2.5 for Update 4 Nov 12. 2014, the SASS compiler has been removed.

Alternate compilers:

• SassyStudio
• Web Workbench
• Web Compiler Only provides support for VS2015

Answer 3

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!

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

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 6

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 7

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 8

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 9

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 10

If you have MVC 6, you could just use gulp. Original source here: http://developer.telerik.com/featured/css-preprocessing-with-visual-studio/

Add the NPM dependencies in package.json:

{
  "name": "ASP.NET",
  "version": "0.0.0",
  "devDependencies": {
    "gulp": "3.8.11",
    ...
    "gulp-sass": "2.2.0",
  },
  "dependencies": {
    "gulp-sass": "^2.2.0"
  }
}

Then in gulpfile.js:

var gulp = require("gulp"),
    ...
    sass = require("gulp-sass");


paths.js = paths.webroot + "js/**/*.js";
...
paths.sass = paths.webroot + "css/**/*.scss";
paths.cssOutput = paths.webroot + "css";


gulp.task('sass', function () {
    gulp.src(paths.sass)
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest(paths.cssOutput));
});

Finally, in the Task Runner Explorer, right-click on your new task sass then Bindings then select After Build

Answer 11

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.