Use Less, Sass and Compass with ASP.NET MVC

In my last project, with my team, we chose to use Compass with SASS as CSS Authoring Framework. Initially we was unsecure about that, the choice was very hard, the classic CSS allows you to find several guys who know it and it doesn’t require compilation unlike with Sass and Less.

I’m not a front end developer so my part in this adventure is to manage the project and to make easy the integration of Less/Sass with an ASP.NET MVC application.

My first question was something like - “Which is the best way to integrate Less or SaaS in an ASP.NET MVC application?” -

If you choose Less everything is easy, you can install “dotless” from nuget and create that bundle (this example is for MVC 4) transformation:

public class LessTransform : IBundleTransform
{
  public void Process(BundleContext context, BundleResponse response)
  {
    response.Content = dotless.Core.Less.Parse(response.Content);
    response.ContentType = "text/css";
  }
}

var myBundle = new StyleBundle("~/Content/css")
                  .Include("~/Content/site.css")
                  .Include("~/Content/Scss1.less");

myBundle.Transforms.Add(new LessTransform());
myBundle.Transforms.Add(new CssMinify());

About Compass? …. mmmmm What is Compass? :)

Compass is another framework built using Sass: if you want to use Compass you need Sass, so my first problem was to integrate Sass into my MVC application. In my previous post "Schmulik Raskin” suggested me Mindscape's Web Workbench, a cool extension that offers you some features like Syntax Highlighting, Intellisense and Compilation not only for Sass but also for Less and CoffeeScript. That’s awesome.

Unfortunately after few hours I choose to use Web Workbench only like an editor and I disabled the compilationL.

Right now the extension doesn’t include some features that I need, like Compass support and output path customization. In spite of all, if you don’t need these features, probably Web Workbench still remains the best solution for .NET developer.

How did I sort out the problem? Using ruby and MS-Build together of course. If you want to do the same, follow the step below:

Download and install the latest version of Ruby and add it to your environment path (I suggest you to use Ruby Installer, it has a wizard and asks you if you prefer to add ruby to your paths – say yes).
From a new prompt window check ruby installation: type “ruby –v” (in my case I got ruby 1.9.3p194 (2012-04-20) [i386-mingw32]);
Type “gem install compass” (it download compass and its dependencies);
Disable Web Workbench in your project “Menu => Mindscape => Web Workbench Settings” and uncheck your .scss files;
Right click on your ASP.NET MVC application and “Unload Project”;
Right click again on the unload project “Edit projectname.csproj”;

Under Project section add the follows code:

<Target Name="AfterCompile" Condition=" '$(Configuration)' == 'Release' ">
  <Exec Command="compass compile --output-style compressed --force" />
  <ItemGroup>
    <Content Include="Styles\*.css" />
  </ItemGroup>
</Target>
<Target Name="AfterCompile" Condition=" '$(Configuration)' == 'Debug' ">
  <Exec Command="compass compile" />
  <ItemGroup>
    <Content Include="Styles\*.css" />
  </ItemGroup>
</Target>

Right click on the project for the last time and push “Reload Project”;

Here we go! Your application is ready to use Ruby with Compass and Sass. How to use it? Just compile your website, MS-Build creates your “.css” from Compass for you.

The first part of the code (debug condition) just create a css file, the second one also minify the file (--output-style compressed --force). Moreover if you need to customize the compilation path and other stuff you can add a file config.rb into your project root and ruby will use that configuration for Compass. My file looks like that:

# Require any additional compass plugins here.

# NORMALIZE: https://github.com/jzorn/compass-normalize-plugin
#require "normalize"

# set environment
environment = :development

# Set this to the root of your project when deployed:
http_path = '/'

css_dir = "Styles/Shared"
sass_dir = "Styles/SCSS"
fonts_dir = "Styles/fonts"
images_dir = "Images"
javascripts_dir = "Scripts"

# Set image path only
http_images_path = (environment == :production) ? 'http://tostring.it/' + images_dir : '/' + images_dir

output_style = (environment == :production) ? :compressed : :expanded

Amazing! You have the power of Compass inside a .NET application without using command line for compiling.

Related posts

Recent posts