How to compile .sass files on save in Visual Studio 2015

This can also be achieved without gulp or grunt by simply clicking your way in Visual Studio.

Install Web Compiler

1. In Visual Studio, press Tools -> Extensions and updates.
2. Search for Web Compiler (created by Mads Kristensen) and install.
3. Restart of Visual Studio will be needed.

Compile files

1. Right-click the .scss-file in Solution Explorer to setup compilation.
2. Press Web Compiler -> Compile File (Shift+Alt+Q).

A file called compilerconfig.json is created in the root of the project where you can modify the behavior of the compiler. Right-clicking the compilerconfig.json file let’s you easily run all the configured compilers.

Any time a .scssfile is modified within Visual Studio, the compiler runs automatically to produces the compiled output file.

Compile on Build

1. Right-click the compilerconfig.json file
2. Press Web Compiler -> Enable compile on build
3. Clicking the menu item will prompt you with information that a NuGet package will be installed into the packages folder without adding any files to the project itself. The NuGet package contains an MSBuild task that will run the exact same compilers on the compilerconfig.json file in the root of the project.

If using Gulp + Visual Studio 2015

1. First install gulp-sass this is the package.json file

{
      "name": "ASP.NET",
      "version": "0.0.0",
      "devDependencies": {
        "gulp": "3.8.11",
        "gulp-concat": "2.5.2",
        "gulp-cssmin": "0.1.7",
        "gulp-uglify": "1.2.0",
        "rimraf": "2.2.8",
        "gulp-sass": "2.2.0"
      }

2. On the gulpfile.js

   var sass = require("gulp-sass");
   var paths = {
     webroot: "./wwwroot/"
   }
   paths.scss = paths.webroot + "css/**/*.scss";
   gulp.task('sass', function() {
     gulp.src(paths.scss)
       .pipe(sass())
       .pipe(gulp.dest(paths.webroot + "css"));
   });
   gulp.task('watch-sass', function() {
     gulp.watch(paths.scss, ['sass']);
   })

3. Now open the "Task Runner Explorer" and double click on the task: "watch-sass"

Now every time you save the scss the css will compile and change sass file.

Web Compiler Extension for VS2015

Gulp is required. npm install -g gulp

Hope this helps... a few less hoops.

Edit:

I encountered an issue with the web compiler converting strings to Unicode characters when it should not have been doing so. I switched to this implementation http://blog.oxfordcc.co.uk/compiling-sass-gulp-visual-studio/ in VS2015 and it's compiling the CSS correctly. Added just in case someone else encounters the same issue.

If you don't want to mess around with the intricacies of setting up the compilation manually, there are a number of amazingly simple extensions available that can handle this for you:

WebCompiler (FREE)

It's been mentioned already but 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