Visual Studio Extension to Compile Sass

Sam Rueby CSS, Uncategorized, Web Development 29 Comments

I’m very excited to have written my first Visual Studio Extension. Prior to this, my team and I heavily relied on Web Essentials 2013. It was somewhat clunky: it compiles simple Sass files very well. However, we kept running into a few issues:

  • It wasn’t always up to date with the latest version of Sass, making it difficult to use mixin libraries like Bourbon. I know this wasn’t Web Essential’s fault: the node-based tools were out of date.
  • Bad error messages. Sometimes the errors were false-positives, the files would compile just fine, but tell us there was a syntax error (with no additional message).
  • Sometimes it could get into a state where it wouldn’t compile Sass files at all anymore until Visual Studio was restarted.
  • It supported Sass partials (files that start with an underscore), but sometimes you had to focus a Sass file that imported the partial in order to kick it off.

So it was a little buggy but we could get by and produce some very-maintainable CSS after realizing we could ignore any sort of error messages and just restart Visual Studio if it didn’t work at all. Despite these issues, it provided a massive benefit: all any team member had to do was install the extension and that was it. They were immediately Sass-compatible. No additional tools, installations, or configuring. Create a .scss file and you’re off in running.

Then came the day Mads Kristensen announced that all node.js-based tools (Sass and LESS compilers) were removed from Web Essentials. I asked via Twitter what the recommended replacement was.

He recommends using a JavaScript Task Runner. I agree that does seem to be a solution, but now using Sass isn’t simple anymore. It’s not create a .scss and you’re done. Configuring Grunt/Gulp is not trivial. It’s also not going to be trivial when the rest of my team is not familiar with Grunt/Gulp and needs to make a change. Worse, not everyone is convinced yet this is the way to go.

Another alternative is to use Ruby Sass. That’s not too bad. It does require installing Ruby, and then the Sass gem, which are extra steps. After that, you need an easy way to run the command line to have Sass starting listening, which will definitely not be automatic. I wanted to have the simplicity I had before. “Install this extension and you’re ready.”

CompileSass was born.

I wrote the cleverly-named CompileSass Visual Studio extension and added it to the Visual Studio Extension Gallery. Right now this plugin features:

  • Compiles fast. The plugin is backed by LibSass and its .NET port.
  • Supports Sass partials. That’s those Sass files that start with an underscore that are just meant to be injected into other files.
  • Displays output to the Build Window, showing a success message or an error message with file name and line number.
  • Supports Visual Studio 2013 and Visual Studio 2015 CTP.

Try it out and let me know how it goes for you!

  • Charles Symons

    Great! I’ve had the same issues with Web Essentials you mentioned. I will give this a go.

    • SamRueby

      Thanks for taking the time to comment! Let me know if you run into any issues.

  • Jon R. Humphrey

    Fantastic work Sam, I’m going to give it a go too! 😀
    Quick question, can you set the roots for a directory structure like you can if you’re using Compass or Grunt?

    • SamRueby

      Thanks!

      Currently: nope! But my next step is to add some configuration settings. I assume it’s easy for me to pass that to LibSass so I’ll check that out.

      • Jon R. Humphrey

        Cheers Sam, it would be great if it was in a standard json format? Happy to test if you need any help!

  • SteveCostello

    Sam, quick question. Earlier today, I noticed that my changes to the .SCSS file were not being reflected in the CSS file, despite successful compiles with no errors. It was driving me nuts! Then I opened Windows Explorer to look at the files in Notepad, and noticed the timestamps on the files. CompileSASS is saving to the .min.css file, and not the straight .css file.

    Is there any way to change this? I’d prefer to have it compile un-minified CSS to the .css file and let whatever other minification tool I might use to handle that process.

    • Me

      I would really second this. Either that, or have it compile to both.

  • Rwing

    HELP! I had a problem when I install it to VS2013 with update 4, the log as below:

    814

    2015/04/03 07:39:03.863

    Error

    VisualStudio

    End package load [CompileSassPackage]

    {8E3D55F4-8907-4F34-9A81-C5187F0ED3E0}

    80004005 – E_FAIL

    Could not load file or assembly ‘Microsoft.VisualStudio.Shell.14.0, Version=14.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a’ or one of its dependencies. 系统找不到指定的文件。

    • SamRueby

      Interesting- that’s the version I mainly use. I’ll check it out.

  • Jake Lauer

    I’m having trouble getting this to work. I’ve installed it, but it doesn’t seem to be compiling, and the options page shows this: http://i.imgur.com/MoeQNFo.jpg

    • SamRueby

      What version of Visual Studio?

  • Martijn van der Put

    I just installed the CompileSass plugin since Web Essentials is giving me an issue. However, I noticed that when I save my .scss files, CompileSass did not used the changes I made when generating the .css files. Is it caching somewhere?

    • SamRueby

      There’s no caching. It opens the .scss file(s), reads them, and outputs to .min.css.

  • Daskul

    Hi Sam!

    Is there any extra step to make it work? I’ve tried installing it on my VS2015 RC. But I cannot find any sign that its compiling. No css file is being created.

  • Gil

    Thanks Sam for the awesome tool!
    Can you please share the source code on GitHub and add an option not to create a minified version of the css file?

    Thanks again 🙂

  • The plugin has a problem compiling the current selector (&):
    /styles/bourbon/css3/selection:4: error reading values after @if
    It seems that you are using an older Libsass Version. This problem has been fixed in Libsass 4.2.

  • tester99

    Hi Sam. My map file seems to be completely out on every project I’ve used CompileSass. Chrome will tell me that styles are in completely different .scss files than they actually are. Any idea why this might happen?

  • Bjorn Backlund

    Great stuff! thanks! Any chance you could support custom output file names? Pre VS2015 we used WE and then all CSS files just got compiled into a corresponding .css file. Your tool is using the .min.css extension which breaks a lot of code.

  • Working great for me, thanks! The only thing I miss from WebEssentials is the side-by-side preview pane.

  • Mark Walter

    Would be great if you open sourced this on Github. Then we can all help in updating it and make it a great tool.

  • Mark Walter

    Would also be great if it added the files to the project. This is helpful for us folks that use an automated build system with MSBuild (such as teamcity). Then they will be put in the output of the build automatically.

  • CyberBlox

    I have VS2015 with the CompileSass package installed. It never compiles to a .css file. What am I doing wrong?

  • Rob Scott

    Sam –

    I’ve been using your extension, and LOVE it. However, I think I “may” have found a bug. You can check out the post on StackOverflow. This relates to commented out functions.

    http://stackoverflow.com/questions/33651909/scss-doesnt-compile-when-function-is-commented-out-compilesass

  • Boris Yegorov

    It does not work at all! No any compiled css files!

  • Raja.M

    Hi Sam, Please help me.! I’ve installed SamRueby.CompileSass in VS2015. But I cannot find any sign that its compiling. No css file is being created. Is there any extra step to make it work?

  • Jacobus

    I installed CompileSass in vs 2015 Update 3. How do compile the .scss files?

  • Ignacio Salinas

    I installed compilesass, for visual studio 2015. It’s not compiling the scss files at all. There’s something missing?