Prepare Yourself for ASP.NET 5 - Part 1 (Less and Sass)

As an ASP.NET trainer I need to talk with many web developers. Recently during one such discussion some of  them expressed concerns about the ASP.NET vNext and the learning curve involved in the process. From what they told it was obvious that they are not comfortable with the new environment for variety of reasons. One of the reasons is they weren't using any of the much talked about technologies - Less, Sass, npm, Gulp, Grunt, Bower, OWIN. I am sure if they would have known at least the basics of these technologies their discomfort would have been much lesser.

Not all developers keep themselves updated with the cutting edge technologies. Many companies keep using the old fashioned ways of doing the things and their developers may not get chance to work with these kind of technologies at all. In this article series I will explain the bare basics of all these technologies as well as major ASP.NET vNext changes you should be aware of. Remember that this article series is for developers already using ASP.NET (either web forms or MVC) but who are absolute beginners in the technologies mentioned above as well as in ASP.NET vNext.

There are many articles and blog posts that talk about features of ASP.NET 5. I am going to take a slightly different approach for this series. First of all I am going to make you comfortable with the technologies that ASP.NET 5 uses and then I will focus on ASP.NET 5 specific features. This way you can see how these technologies work with current version of ASP.NET MVC and Visual Studio 2013. Then you can easily understand how they are used in ASP.NET 5. To begin with, this first part tells you something about Less and Sass. So, let's get going.

Traditional vs. modern way of creating ASP.NET applications

Before I go any further I would like to outline the tasks that many simple web applications follow. By simple I mean web applications that don't use any of the above mentioned technologies. They are restricted mostly to what comes with the default installation of .NET, Visual Studio and web standards.

Ok. So, the traditional way of developing ASP.NET applications is as follows:

• You create an ASP.NET web application project in Visual Studio.
• You write application specific server side code. This can be done either with web forms or with MVC.
• You may refer .NET framework assemblies and custom components using References folder in the Solution Explorer.
• You may install some NuGet packages using "Manage NuGet Packages" options in the Solution Explorer.
• You add JavaScript libraries such as jQuery or AngularJS to your project (or refer them from CDN).
• You create JavaScript files needed by your application.
• You create CSS style sheets for your application.
• You may do some unit testing for your application.
• You make pre-deployment changes to web.config (XML) such as connection string and app settings.
• Finally, you deploy your application on the server.

I am sure you are quite familiar with these steps. Now let's see what steps a modern way of creating web applications follow. Many modern, big applications use this approach to produce a better code-base and to manage it with less pain.

• You create an ASP.NET web application project in Visual Studio.
• You write application specific server side code. This can be done either with web forms or with MVC.
• You may refer .NET framework assemblies and custom components using References folder in the Solution Explorer.
• You may install some NuGet packages (server side, compiled assemblies) using "Manage NuGet Packages" options in the Solution Explorer.
• You use some client side package manager such as npm and Bower to grab the JavaScript libraries such as jQuery and AngularJS.
• You create JavaScript files needed by your application using plain JavaScript and / or TypeScript or CoffeeScript.
• You compile your TypeScript or CoffeeScript into plain JavaScript.
• You create style sheets using some CSS pre-processor such as Less and Sass.
• You compile the Less and Sass files into plain CSS.
• You minify all the JavaScript and CSS files you created so far using some automated build tool such as Gulp or Grunt.
• You do unit testing of your application.
• You tweak the configuration file (JSON format, more on this in later parts) to adjust settings such as connection string.
• Finally, you deploy your application on the server or in the cloud.

I know these lists doesn't cover all the tasks but can you see where the technologies I mentioned earlier go? Just try to compare and relate the two styles and notice where these technologies fit in.

As a first installment I am going to discuss the basics of Less and Sass.

Quick introduction to Less and Sass

Creating CSS style sheets and attaching them to web pages is a common task one needs to do. Although this task is straightforward and relatively simple it has some troubles of its own. Consider the following style rules:

h1 {
  color: #0026ff;
  font-family: Arial;
  font-size: 20px;
}

h2 {
  color: #0026ff;
  font-family: Arial;
  font-size: 16px;
}

Here you have two style rules that use the same color and font-family value. Image a case where you are using a particular color code and font family at 100 places. Although this is perfectly alright as far as final display is concerned what if you need to change the color from #0026ff to something else? Obviously, you need to change it at all those 100 places. Wouldn't it be nice if you can use variables in CSS? This way a value can be stored in a variable and the variable can be used in all those 100 places. This is where CSS pre-processors such as Less and Sass come into picture. Both - Less and Sass - help you to achieve the same goal but they use slightly different syntax.

The official Less website lesscss.org defines Less like this:

"Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable."

The official Sass website sass-lang.com says :

"Sass lets you use features that don't exist in CSS yet like variables, nesting, mixins, inheritance and other nifty goodies."

Installing and using Less

Now, let's see how Less can be put to use with a simple example. I won't go into too much details of Less here. My intention is to give you a brief idea of what you can achieve with Less.

First of all go to Node.js website and install Node Package Manager on your development machine. Then open the Command Prompt and issue the following command:

npm install -g less

This will install Less on your machine. Once installed you can use Less compiler to compile Less code to plain CSS.

Next, create an empty ASP.NET MVC project in Visual Studio and add a LESS style sheet to it. See how the Add New dialog has a template for this item:

Notice that Less files are stored with .less extension. Instead of using this template you can also add a text file manually and save it with .less extension.

Then add the following "code" to the Less style sheet:

@textSize:20px;
@fontName: Arial;

h1{
    color:blue;
    font-family:@fontName;
    font-size:@textSize;
}

Above code declares two Less variables - @textSize and @fontName - and also stores some values in them. Note that the h1 style rule doesn't hardcode font-family and font-size. It uses @textSize and @fontName variables declared earlier. Now if you wish to change the font size and family all you need to do is change the variable value.

Browsers won't understand .less files unless you compile them to plain CSS. To do so you need to invoke Less compiler as follows:

$ lessc StyleSheet1.less > StyleSheet1.css

The Less command line compiler - lessc - takes two things. The .less file name and the .css file name where the result of compilation is to be stored. If you invoke the above command successfully StyleSheet1.css will contain something like this:

h1 {
  color: blue;
  font-family: Arial;
  font-size: 20px;
}

This is plain old CSS!

Now you can add a <link> reference to StyleSheet1.css in all the ASP.NET web forms or MVC views.

Installing and using Sass

Sass works on similar lines as Less but there are a few differences. Firstly, you need to install Ruby on your development machine. You can do so by visiting Ruby Installer website. Once installed you need to invoke Command Prompt as before and issue the following command (make sure to navigate to the Ruby installation path).

gem install sass  

This will install Sass on your development machine.

Next, add a text file to your Visual Studio project and name it - StyleSheet2.scss

Note that there are two syntax variations for Sass. One uses file extension of .sass and the other uses file extension of .scss. The later is the newer syntax and hence is recommended.

Now add the following "code" to the .scss file:

$textSize:20px;
$fontName: Arial;

h1{
    color:blue;
    font-family:$fontName;
    font-size:$textSize;
}

As you can see, the syntax is quite similar but uses $ instead of @ for variable names.

To compile this Sass code to plain CSS, open Command Prompt and issue this command:

sass --watch "C:\Demos\StyleSheet2.scss"

This will compile the Sass code and create StyleSheet2.css file for you. If you open the .css file you should something like this:

h1 {
  color: blue;
  font-family: Arial;
  font-size: 20px; }

/*# sourceMappingURL=stylesheet2.css.map */

You can now refer the StyleSheet2.css file in your web forms or views.

That's it for today! Will be back with the next installment soon.