Working with Sass Stylesheets in ASP.NET MVC Applications and Visual Studio

I stopped writing plain CSS a long time ago, and frankly, I never looked back. Luckily, we nowadays have advanced pre-processors like Less and Sass, so working with CSS feels a little bit less like this:

Fiddling with CSS

For the last couple of years, I used Less to pre-process my stylesheets, but recently made the switch to Sass, which is even more powerful than Less. Here's how I organize and compile my Sass stylesheets in ASP.NET MVC applications with Visual Studio.

Approaches to Pre-Process CSS Files

When you're using a CSS pre-processor to write your stylesheets, you need to compile those files at some point of time. After all, browsers only understand plain CSS and know nothing about Less or Sass. There are three conceptually different approaches for compiling a stylesheet with a CSS pre-processor:

  1. Dynamically compile the stylesheet on the server when the file is requested.
  2. Deliver raw stylesheets to the browser and compile those using JavaScript.
  3. Compile the stylesheets to static CSS files right after updating and saving them.

I've chosen option #3 for my Sass stylesheets because this approach works nicely with bundling and minification and doesn't require any JavaScript execution in the browser.

Compiling Sass Stylesheets

While Visual Studio 2013 ships with an editor that provides syntax-highlighting, IntelliSense, formatting, outlining, and more, it doesn't include a Sass compiler. This means that you can create new *.scss files and edit them with nice tooling support, but Visual Studio won't generate the compiled CSS files for you.

There's a great Visual Studio extension, though, the Mindscape Web Workbench, which does exactly that (and a lot more). It splits your Sass editor into two panes and directly shows you the resulting CSS on the right-hand side:

Working with a Sass file in the Mindscape Web Workbench

When you save a *.scss file, the Web Workbench will automatically compile it and create a CSS file for you that's nested underneath the Sass file:

Solution Explorer with CSS file nested underneath Sass file

Let's now take a look at how to organize our stylesheets.

Organizing Sass Stylesheets

When you have even a medium amount of Sass rules, you want to split them up into separate files. Each of those should only contain styles for one particular piece of functionality. Thanks to the @import directive that comes with Sass, it's almost trivial to import rules from other referenced stylesheets:

Sass file with @import directive

Note that the imported _Mixins.scss stylesheet has a leading underscore in the file name. That causes the the Web Workbench (and the Sass compiler in general) not to generate a standalone Mixins.css file. This is desired behavior as _Mixins.scss only contains a collection of mixins which are inlined into the Sass rules that include them.

I usually create the above mixins file and a _Settings.scss which defines variables for accent colors, font families, etc. that are used in various places of my stylesheets. If the website uses custom web fonts, those are defined in a _Fonts.scss file. Here's how a simplified Styles folder could look like:

Multiple Sass files in Solution Explorer

Setting Up Bundling and Minification

Because we want to create web applications with great performance, our stylesheets should be bundled and minified in order to minimize HTTP requests and bytes sent over the wire. Using the @import approach described above, the bundling part is a piece of cake: Just create one main Sass file and import all required stylesheets. I like to name it Bundled.scss:

Bundled.scss

It's very convenient that the Web Workbench understands Sass dependencies, which means that the Bundled.scss file is recompiled automatically whenever one of its imported stylesheets changes. There's no need to invoke the compilation manually, so you can simply make a change to one of the dependent stylesheets, save it, and be done.

The Bundled.scss file is the only stylesheet whose name doesn't start with an underscore, so the Sass compiler will create a CSS file for it. That resulting CSS file with all the required rules can then easily be used in conjunction with a style bundle from the System.Web.Optimization bundling and minification framework:

var styleBundle = new StyleBundle("~/Client/Styles/Bundled")
    .Include("~/Client/Styles/Bundled.css");

BundleTable.Bundles.Add(styleBundle);

Finally, the bundle needs to be rendered in the Razor layout view:

<head>
    <!-- ... -->
    @Styles.Render("~/Client/Styles/Bundled")
</head>

When running in debug mode, the stylesheet will be rendered without being minified, which facilitates diving into the CSS rules when debugging. In production, however, minification CSS is desired and will be performed.

And there you go! That's how I work with Sass in my ASP.NET MVC applications.

Use the coupon code LAUNCHDAY for $10 off!

Learn ES6

18 Comments

Marius Schulz

@Ali: You're right, Visual Studio 2013 supports editing Sass files. However, the compiler itself is missing, which means that you need additional tooling in order to transpile your Sass code into CSS. Both the Web Workbench or the Web Essentials will do.

funzeye

Would stick with Web Workbench for now as Web Essentials is only at Sass 3.1 or so, doesn't support any of the 3.3 functionality like Workbench does. Sassy Studio 2013 is another extension that I have found good (I prefer it to Workbench actually!), but again, only has support up to Sass 3.0 I think...

Emerson Jose

Good job, This tutorial help me a lot, because I have the same problem. When you create or separate in modules, I think that no only code will more clean with also more organized.

Subrata Sarkar

Hi,

I have added a SCSS file to my solution created in VS 14 CTP. But updating and saving is not generating the CSS and other supporting files.

Downloaded Web Essentials from here:

https://visualstudiogallery.msdn.microsoft.com/56633663-6799-41d7-9df7-0f2a504ca361/view/Discussions/2

but got the following installation error message:

"Installation Failed

The installation was unable to install the extension to al the selected products. For more information, click on the install log link at the bottom of the dialog.

this extension is not installable on any currently installed products."

What I am doing wrong?

adon olam

I instolled Mindscape Web Workbench and create a sass file but nothing happen , and I stayed with only one file sass and the Web Workbench didn't automatically compiled it and created a CSS file for me that's nested underneath the Sass file... thank for quickly answer

Christian

Ugggh... I come from Git Bash CLI world and I don't think I i will get an even close configuration going on VS 2015... would you mind helping? do you have skype?

Ryan V

Is it possible to use scss to generate the styles inline in the <head>? The ones that are need for the page to render? I'm trying to optimize my pages for Google PageSpeed and want to work around this issue: "Eliminate render-blocking JavaScript and CSS in above-the-fold content. " "Try to inline the critical portions of those resources directly in the HTML."

tzvi

Sass editor into two panes - it doesn't do it for me. How did you get it to open two parallel side by side panes of sass and css ?

Marius Schulz

@tzvi: Opening multiple panes is a native feature of Visual Studio. You can do that with every editor window!

Basant Gera

Hey Hi,I am facing a problem while I am trying to connect the stylesheet.css file to my view in MVC... Its not connecting...I am using <link type="text/css" rel="stylesheet" href="~/Views/"???? but in solution explorer I can see the style sheet being listed but when write code in intellisense its not their in solution Item in VS 2014...What should I do...

Matt

Mindscape Web Workbench is crap; they have removed the split pane tool (as pictured in your article) which was the only useful tool. May as well be building with ruby.

Matt

Aside from that, this was an extremely informative and useful tutorial. Thank-you very much Marius!

Dima

IN MVS 2015 Express not working (((

Abdul Rahman Kayali

That was so helpful for me, thanks.

Sung Kim

Thank you, Marius, I really enjoyed the post. I am just learning SASS and this came in quite handy.

Moharram

Thank you. This tutorial is very good and help me a lot.