How to Use LESS CSS in WebMatrix

LESS is a dynamic style sheet language that enables advanced scenarios with CSS. WebMatrix provides support for many constructs in LESS, including variables, mixins, operations, and functions. For more information about LESS, see http://lesscss.org/.

Adding a LESS style sheet to your site

If you would like to start using LESS in your site, you can start by adding a new file. In the lower left corner of the WebMatrix window, click the Files tab to open the Files workspace, and then click New.

image

Tip: You can also use the keyboard shortcut CTRL-N.

This will open the Choose a File Type dialog. Click the All category on the left side of the dialog to show all of the supported file templates in WebMatrix, and then select CSS (LESS). Accept the default name of StyleSheet.less, and then click OK.

image

Using LESS CSS

To get started with LESS, you can use some basic CSS. LESS is compatible with CSS 3.0 syntax, so your existing CSS classes will work as classes in LESS. Start by creating styling for the body background:

body {
    background-color: #222;
    margin: 0px;
    padding: 0px;
}

This is basic CSS you would use in any other style sheet. Now add a class for creating boxes with rounded corners. The rounded corners are specified by the border-radius attribute:

 
 
.box {
    border:  1px solid #CCC;
    background-color: #eee;
    color: #222;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;    
    border-radius: 5px;
}

At this point, you haven’t taken advantage of any of the features of LESS. The color #222 is used twice inside of the style sheet: once for the body background color, and once for the foreground color of the boxes. LESS lets you create a variable so that you only have to specify the color once.

At the top of the style sheet, create a variable for color #222 by entering the following:

@darkGrayColor: #222;
 
 
Now edit the background-color and color properties to use the @darkGrayColor variable. The style sheet will look like this:
 
body {
    background-color: @darkGrayColor;
    margin: 0px;
    padding: 0px;
}
 
 
.box {
    border:  1px solid #CCC;
    background-color: #eee;
    color: @darkGrayColor;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;    
    border-radius: 5px;
}

Notice that as you type the @ symbol in the LESS file, IntelliSense for your variable appears:

image

Now create another CSS class that uses different colors for the foreground and background:

 
.colorfulBox {
    border: 1px solid #a54908;
    background-color: rgba(255, 106, 0, 0.27);
    color:  #000;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;    
    border-radius: 5px;
}

Notice that the border radius vendor prefix attributes appear in multiple places. In LESS, you can create a class for the rounded corners, and then embed that class in other classes like box and colorfulBox (this technique is called a mixin). By doing this , you'll only have to write the rounded corner styles once.

First, add this class at the top of the style sheet after the @darkGrayColor variable:

.roundedCorners(@rad: 5px) {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;    
    border-radius: 5px;
}
Now, edit the box and colorfulBox classes to use the roundedCorners class, so that the style sheet looks like this:
 
@darkGrayColor: #222;
 
.roundedCorners(@rad: 5px) {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;    
    border-radius: 5px;
}
 
body {
    background-color: @darkGrayColor;
    margin: 0px;
    padding: 0px;
}
 
.box {
    border:  1px solid #CCC;
    background-color: #eee;
    color: @darkGrayColor;
    .roundedCorners(5px);
}
 
.colorfulBox {
    border: 1px solid #a54908;
    background-color: rgba(255, 106, 0, 0.27);
    color:  #000;
    .roundedCorners(5px);
}

Notice that when you start typing the ‘.’ inside one of the classes, you will see IntelliSense for your mixin:

image

You may also notice the red squiggly line on line 3 under @rad. WebMatrix provides LESS validation, warning you about syntax errors. To see the error, place the mouse pointer over the red line:

image

You can also use the Error List:

image

Compiling your LESS into CSS

Many web frameworks will automatically generate CSS based on your LESS StyleSheet at runtime. If you want to compile your LESS into CSS at design time, you can use the OrangeBits compiler extension for WebMatrix. The OrangeBits compiler automatically creates CSS every time you save your LESS document. To add the OrangeBits extension to WebMatrix, click the extension gallery icon in the ribbon:

image

The extension gallery contains useful extensions that add capabilities to WebMatrix. In the search box, type "OrangeBits", select OrangeBits Compiler, and then click Install.

image

When the installation finishes, save the StyleSheet.less file. The notification bar tells you that the file has been compiled, and the StyleSheet.css file that the compiler generated appears in the file tree. Open the StyleSheet.css file, and you will see that standard CSS code has been generated from your StyleSheet.less file.

Note that now you can also right click any *.less file in your tree, and select Compile:

image

This will also generate StyleSheet.css in the file tree, which you can open:

image

Finally, all of the WebMatrix editor CSS features like formatting, validation, code folding, and brace matching are also available when you write LESS.

You can discuss this article using the adjacent Facebook talkback.

For technical questions please visit our discussion forums, where we have a vibrant community of developers like you, as well as Microsoft engineers who are ready to answer your questions!