Explore Videos MSDN eNews Social
Windows
Web
Phone
Cloud
Visual Studio
Security
ALM
Breakpoint
Canada Does Windows Azure
More
The latest on developer tools and technologies you care about.

Sign Up
Latest Editions
Previous Editions  
Stay connected through on your favourite social network.

Twitter
Facebook
LinkedIn

Refactoring your CSS with LESS in Visual Studio Web Essentials

Refactoring your CSS with LESS in Visual Studio Web Essentials

  • Comments 5

I recently took on the somewhat daunting task of giving a legacy ASP.NET application a major facelift. At first, I thought this would be an easy task. All I need to do is update the CSS, right?

In reality, this was an application with 8 years of history and at least 10 different CSS files that had all evolved separately.

It was at this point that I decided some CSS refactoring was required in order to successfully pull off this facelift.

Enter LESS

I remembered attending a conference session about LESS and I thought it might help to simplify my CSS.

LESS is an extension to CSS that adds some features that can help make your CSS files a little easier to manage. Typically, LESS is compiled to CSS and the browser doesn’t even know that LESS was used in the background. No browser extensions or client side libraries are needed to use LESS.

One of the most basic LESS features is variables, which allow you to control commonly used values in a single location. For me, this was a great starting point. Since I knew I would be spending some time tweaking the color scheme for the application, it would be great if I could define all my colors in one place and reference those colors in the various CSS files in my application.

Getting started with LESS in Visual Studio

If you have the Web Essentials extension installed (and you should), getting started with LESS is extremely easy. First, rename your .css files to .less. Next, open each .less file and click Save. Web Essentials will create a .css and a .min.css file nested below the new .less file. Any time you make a change to your LESS file, Web Essentials will regenerate the .css and .min.css files.

image

You will also notice that when you open the .less file the source is split vertically.

image

The code on the left is your LESS code. The code on the right is a preview of the resulting CSS code that Web Essential will generate for you. Since we have not made use of any of the LESS features, the code on the left should be the same as the code on the right.

Defining Color Variables

You can define variables using the syntax @variable-name: variableValue;

Start by adding a variable @primary-color: at the top of your main LESS file. If you start to type a hex color be adding #, a Web Essentials popup will appear listing all the colors found in this file.

image

Select the color that represents your primary color. Now replace all other occurrences of that color with @primary-color.

When Web Essentials compiles the .less file to .css, @primary-color will be replaced with the value assigned to that variable in the .less file.

image

Now repeat this process with all the colors in your less file. Eventually, you should end up with a concise theme defined at the top of the file.

image

If you want to make changes to your color theme, simply change these color variables and the changes will auto-magically appear throughout the resulting CSS file.

Adding Functions

We can take this a step further and make use of LESS functions. Instead of defining 4 different shades of green for our various shades of primary colors, we can use a function to programmatically lighten the primary color as follows:

image

Now this LESS

image

compiles to this CSS:

image

Now, If you want to change your primary color from green to blue, you can change the single @primary-color variable and all the various shades of green will change to shades of blue.

image

Extracting a file

If like me, your CSS was split across numerous files, you can also extract your color variables into a separate LESS file and reference those colors from other files.

To extract the colors to a separate file, select the lines containing all the color variables, right click and select Web Essentials –> Extract to file. Name the file colors.less.

In the original less file, add import “colors.less”; to the top of the file.

image

Next, import the colors.less file into all your other LESS files and you will be able to reference the color variables from all your LESS files.

Now, you have a single place to change the colors everywhere in your application.

Web Essentials Settings

Web Essentials has some settings for how it supports LESS. You can access Web Essentials settings by selecting Tools –> Options from the Visual Studio menu, then selecting Web Essentials –> LESS.

image

You can choose to compile to CSS on build instead of on save. You can also choose to hide the preview pane.

Summary

We have really only scratched the surface of what LESS can do for you. For me, it was a huge help when trying to apply some more modern styling to a somewhat dated web application.

Visit the LESS website to learn more about other features that can help you. I found Variables, Mixins, various built in Functions to be very useful.

Leave a Comment
  • Please add 6 and 7 and type the answer here:
  • Post
  • Great article, its made me curious about learning more about LESS.  I would like to see more articles on dealing with enchantments to legacy ASP.NET.  I'm dealing with a legacy ASP.NET app with inline styles and CSS files.  It would be great to hear from other experienced developers on best approaches.

  • Thanks Tom. You might be interested in this post on getting started evolving an ASP.NET Web Forms application: www.davepaquette.com/.../so-you-inherited-an-asp-net-web-forms-application.aspx

    Also, Simon Timms and I are working on some articles related this topic as well so stay tuned for that.

  • Loved it. i always wondered on how to use LESS. this simplified it.

  • Nice article, but i have a small question. I have set my output folder in the options menu. In this folder is a file called master.css. This file is generated by master.less which imports all less files that i use. This is working like a charm, only it also makes a seperate css file in this folder. For example it creates a variables.css while this is a file thats imported by master.less

    Does anyone knows how to fix this?

    Daniel

  • Excellent question Daniel. There is a new feature that will be available in the next version of Web Essentials. Using a .weignore file, you will have the option to specify a list of files that will be ignored by the less compiler. In your case you would add '**/variables.less less' to a .weignore file in the folder containing the variables.less file.

    You can find details here:

    github.com/.../1250

Page 1 of 1 (5 items)