What is LESS (style-sheet language)? Exploring LESS coding features inside Visual Studio - Web Essential?

In this post we are going to talk about LESS and its introduction, coding, compilation and features available in Visual Studio Editor with Web Essential extension. Before talking about anything let’s understand what is LESS and how it can help developers.

What is LESS?

CSS is very simple and straight forward client side language. It has its limitations, particularly when it comes to its maintenance. When we have thousands of lines of styles and some separated CSS files to maintain, things will become problematic. To solve the problem, a CSS pre-preprocessor is created to allow us to compose styles in a more dynamic way. There are a few other solutions, but the one that we are going to cover this time is LESS or LESS support in Visual Studio with Web Essential extension.

So, LESS is a dynamic style-sheet language (influenced by Sass and Zuss) designed by Alexis Sellier, Dmitry Fadeyev in around 2009 and available under open-source. LESS provides the following mechanisms: variables, nesting, mixins, operators, functions etc. The main difference between LESS and other CSS pre-compilers being that LESS allows real-time compilation via LESS.js by the browser, we are not going to cover this here. What we are going to cover is LESS support in Visual Studio with Web Essential 2012 onward extensions. Visual Studio Web Essentials compiles LESS like never before in any other editor and gives LESS and CSS preview side by side and more bunch of features. This compilation can be either on Save or on Build and also automatic minification inside Visual Studio Editor.

Quick Points to Remember

1. LESS is dynamic style-sheet producing language.

2. LESS extends CSS with dynamic behavior such as variables, mixins, operations, functions and much more.

3. LESS is super set of CSS just like TypeScript is super set of JavaScript, hope you getting my point.

4. Any CSS file is a valid LESS file just like any JavaScript file is valid TypeScript file.

5. LESS compiles down to CSS either on Save or on Build (we can set it in Visual Studio | Tool | Options). It is very similar to the way TypeScript compiles down to JavaScript and CoffeeScript compiles down to JavaScript.

6. Visual Studio Editor provides intellisense support for LESS coding.

In case you missed my recent posts on Web Essentials, just read them before proceeding here.

Base64 Encode Image in Website - Web Essential

Image Optimization in Website - Web Essential

Paste Image from clipboard onto Visual Studio Editor : Video - Web Essential

Creating Image Sprite in Visual Studio - Web Essential

In this post we are going to cover some of the cool feature of LESS using Visual Studio Editor and Web Essential Extension.

Coding Features in Visual Studio Editor (with Web Essential) for LESS

There are many questions you might ask here are, how to create LESS file and where to create LESS file, how LESS file compiles down to CSS, how LESS compiles down to the CSS file to custom folder, how to write simple LESS codes, what are available coding features for LESS etc.

Now let’s address each of them one by one.

How to create LESS file and where to store it and compile it?

Creating/Storing less file is similar to creating/storing CSS file. Either we can add a fresh new file with .less extension or we can rename existing .css file to .less file and start writing less codes with existing CSS code, Visual Studio will take care of the rest.

We can create LESS file anywhere in the application, best practice to create it inside ~/Content/ or ~/Styles/ folder on the root.

Let’s go and create new LESS file.

Right click on the folder where you want to add .less file and select Add | LESS Style Sheet. Here is the screenshot.

Now in the dialog enter the LESS Style Sheet name, here is the screenshot.

Now you will notice a new file with LESS and CSS views side by side, here is the screenshot.

In the above screenshot you will notice few files (CSS file and minified CSS file) underneath .less file got added automatically on save (Ctrl+S) by default. Actually when we save the .less file after writing code, it compiles and generates .css file and .min.css file to be used in application. So, when we do ‘save’ LESS file compiles which can be changed to ‘on build’ from Tool | Options menu, here is the screenshot.

In the above screenshot you can see we have various options for compilation behavior as well as preview pane option.

How LESS compiles down to the CSS file to custom folder?

This is also available inside Tool | Options menu. In the screenshot given below, you can see I have created a new folder to keep compiled CSS (also minified CSS file) in another folder ~/CompiledStyles/ and used same folder name for ‘Custom output directory’ in the ‘Options’ window. Here is the screenshot.

Now you have enough idea about LESS and we all set to look at its coding features.

LESS coding inside Visual Studio

There are various cool coding features available inside Visual Studio Editor for LESS with intellisense support. Let’s explore them one by one.

Variables

LESS allows variables to be defined. LESS variables are defined with an @ (at) sing. Variable assignment is done with a : (colon) sign. During compilation, the values of the variables are inserted into the CSS output file as well as CSS minified file. Here is the screenshot.

Notice the intellisense support provided by Visual Studio makes our development life way better with CSS now. Cool.

Mixins

Mixins allow embedding all the properties of a class into another class by including the class name as one of its properties, thus behaving as a sort of constant or variable. They can also behave like functions and take one or more arguments. CSS does not support Mixins. Any repeated code must be repeated in each location. Mixins allow for more efficient and clean code repetitions, stick to DRY principals, as well as easier alteration of code. Here is the screenshot.

Nesting

CSS supports logical nesting, but the code blocks themselves are not nested. LESS allows nesting of selectors inside other selectors. This makes inheritance clear and style sheets shorter. Here is the screenshot.

Functions and Operations

LESS allows operations and functions. Operations allow addition, subtraction, division and multiplication of property values and colors, which can be used to create complex relationships between properties. Functions map one-to-one with JavaScript code, allowing manipulation of values. Here is the screenshot.

Scope

LESS applies the Scope concept, where variables will be inherited first from the local scope, and when it is not available locally it will search up a wider scope. Here is the screenshot.

In the example above, the header has a black background color, but ‘nav’ background color will be blue as it has @color variable in its local scope, while the ‘a’ will also have blue that is inherited from its nearer parent ‘nav’.

There are bunch of more features available inside Visual Studio with Web Essential extension, we will cover them in upcoming post.

Hope this helps.