Computer Magic Logo
Create a less file

Sunday, June 7, 2015

Published by Aristotelis Pitaridis

To create a Less file in Visual Studio, right click on the folder where you want to place the new file and select the command New item from the submenu Add. Add New Item dialog box will appear on the screen.

From the list of Templates choose the LESS Style Sheet. Τype the name of the file you want to create and click the Add button to finish creating the file.

When working on a Less file in Visual Studio, the Editor is divided into two parts. On the left side we can edit the contents of the Less file and on the right side we can see the code after the compilation. Initially on the right side an error message appears. This occurs whenever there is a syntax error in the Less file or there is not content for the compiler to compile.

Let's try to add content to the Less file to see the behaviour of the compiler. We modify the file by adding the following content:

body {
    background-color: lightgray;
    color: gray;
}

Let's try to save the file by pressing the key combination Ctrl + S and we will see two things. The first thing that has happened is that in the right part of the Editor is displayed the result of the compilation made by saving the Less file. The second thing that has happened is that the compiler has created three new files that are nested below the Less file you created.

The compiler has created a CSS file, a map file, and a minified version of CSS. Every time we make a change in Less file and store the file, the Web Essentials extension will update these files.