SASS and SCSS in Visual Studio 2013 with Web Essentials - starring Compass and Susy


Since going to Build and seeing Mads Kristensen talk about the upcoming additions to Visual Studio 2013 with Update 2 and specifically what is new in Web Essentials I have been playing around with some of the new features.  A lot of these features are not yet well documented with how-to's because they are so new so I wanted to blog about how easy it was to integrate SCSS into a VS2013 project.

In this post I am going to touch on using Compass and Susy to create our own styles in Visual Studio 2013.  I



Lazy dev's resources

The fun part

Let me start by saying that before starting this work I had no previous experience with Compass nor Susy, I do not have Ruby installed on my Windows machines, and I had almost no problems along the way with this set-up.  I received the SCSS and SASS Compass files from a designer and wanted to be able to take over their compilation and make sure that I could edit and maintain them as needed.  I would recommend having a build of Compass and Susy in SASS / SCSS file type already if possible, if not follow the instructions on their website to obtain it.  If you want to grab the built source check out the Github link for Compass and grab everything in that folder.

My first step was to bring all of the SCSS into my project.  The files that I brought in also contained SASS from a designer that needed to be converted but I will detail that more below.  I created a default ASP.NET MVC 5 project that the styles could be applied to for something like a style guide later.  Once I dragged and dropped all of the relevant files over we should be ready to rock.

Convert all SASS to SCSS

You may not need to do this, but if your project contains any SASS we need to convert it to SCSS file type.  The reason is that the SASS files do not appear to compile in Visual Studio without using any other plug-ins.  Also the SCSS syntax / format should be more familiar for most developers who are familiar with CSS and using brackets { } and semi-colons ;.  The SASS syntax follows the HAML indentation-style format which if you aren't familiar with like me looks like Ruby.

I converted all of the SASS files very easily using the SASS to SCSS Converter website which is 100% free and extremely easy to use.  Simply copy the SASS into the left pane and proper SCSS is output on the right.  It can't be any easier unless Web Essentials supported SASS to SCSS conversion, which it currently does not, but I am working on a plug-in for now to do it for you without leaving VS2013.

Fix all of the references

By default all the Compass files are happy with @importing their dependencies based on the namespace compass such as -

@import "compass/reset/utilities";

But we need to help Web Essentials find the dependencies using a more relative paths like this -

@import "../../reset/utilities";

The good thing is that once we start typing VS/WE will give us Intellisense to find the files without guessing.  The only thing that I noticed is that when you use Intellisense it wants us to use the fully-qualified file name (including the _ prefix and .scss format) which doesn't follow SCSS convention.  It may work good either way but to follow convention remove the underscore and format.

NOTE : Along the way each individual SCSS Compass file will probably not compile properly.  The reason is that Compass uses Mixins and Variables that may not yet be available.  This is Ok!  We only need our main SCSS file to compile in the next step.

Let's start using Compass!

After fixing all of the references and making sure we are only using SCSS file types we can create our own SCSS file to be the main style aggregate.  If you are incorporating Susy as well simply make sure to follow the same steps as we did with Compass above in fixing the references.  Create an application.scss in your project at the same or higher level as _compass.scss.  Simply right-click on a folder and 'Add Item' and search for SCSS file type.

Our project structure shouldn't matter too much but this is what I am using for now -

  • application.scss
  • _compass.scss
  • _susy.scss
  • compass (dir)
  • susy (dir)

Using the @import directive will create a dependency on an other SCSS file, so let's @import compass and susy

@import 'compass';
@import 'susy';

Now that Compass has provided us with a bunch of mixins and variables that we can use lets try it out.  For production we should separate our style logic into partials for good practice but for now let's just do it right here in the application.scss  Add the following two lines to see our work in progress -

header {
  @include bleed;

Ok that doesn't seem very beneficial.  What did we just do?  Susy has a mixin called bleed that can be applied and will give us some reusable margin and padding helpers to make our header bleed into columns.  Check out the mixin at susy/_padding.scss in your project to get a better understanding of what it is doing under the covers for us.

Compile it

By clicking save (or pressing Ctrl-S of course) we can save our SCSS and Voila! we should see the following output - 

header {
  margin-left: -1em;
  padding-left: 1em;
  margin-right: -1em;
  padding-right: 1em; }

This isn't going to fix everything but it's a good start.  Start creating some awesome stuff and feel free to link to it in the comments below

Changing the output directory and other settings

If you want to change where the CSS outputs to or change settings such as minifying the compiled CSS automatically you can do so by going to Tools/Options/Web Essentials/SASS and make your changes there.

Good luck!