6 min read

(For more resources related to this topic, see here.)

Installing LESS

We’re going to start the recipes in this book by looking at how we can get hold of LESS, and adding support for it to your website. LESS comes in two versions, depending on whether you want to use it client side or server side; for the purpose of this recipe, we’re going to use it client side. The library is hosted on Google Code, and can be downloaded or included (as a CDN link) from http://cdnjs.cloudflare.com/ajax/libs/less.js/1.3.1/less. min.js.

How to do it…

The following steps will guide you in installing LESS:

  1. Let’s get started by creating a new folder on your PC, let’s call it test less projects.

  2. Crack open a normal text editor of your choice, save a copy of the code from the What you need for this book section in the preface of this book, and save it as test less include.html.

  3. Add the following in between the <body> tags in the code:

    <form action="">
    Name: <input type="text" class="input" />
    Password: <input type="password" class="input" />
    <input type="submit" value="This is a button" />
    </form>

  4. It shows a very plain, basic form, so let’s fix that by starting to use LESS to provide some styling. Create a new document in your text editor, then add the following, and save it as include.less:

    @color-button: #d24444;
    #submitfrm {
    color:#fff;
    background:@color-button;
    border:1px solid @color-button - #222;
    padding:5px 12px;
    }

  5. Let’s now add a link to this file to your main HTML file, so go ahead and alter your code accordingly:

    <link rel="stylesheet/less" type="text/css" href="include.less">

  6. That’s all that’s required, so if you now open your browser, and view the file, you should see on screen the same as the following screenshot:

How it works…

This recipe was intended to serve as a very basic example of how you can use less.js. You will be already familiar with what most of the code does, with two exceptions (highlighted in the following code snippet):

@color-button: #d24444;
#submitfrm {
color:#fff;
background:@color-button;
border:1px solid @color-button - #222;
padding:5px 12px;
}

The first exception is simply setting a variable called color-button, which holds a value of #d24444; this is the red background you see on the button.

There are a couple of points of interest here:

  • All variables used in LESS must be preceded with an @ sign, to denote that they are variables

  • Variables don’t actually exist in the LESS library

Huh? I hear you ask. That surely doesn’t make sense! Well, let me explain: when using LESS, variables are actually classed as constants, as you can’t reassign a new value to an existing predefined variable. There is nothing stopping you from using an existing variable to calculate a new value, but that value must be assigned to a new variable, or used to work out a value for a CSS style:

background:@ color-button;
border: 1px solid @color-button - #222;
padding: 5px 12px;

There’s more…

In order for the library to work properly, you need to first include links to your .less stylesheets, and set the rel tag to stylesheet/less, in order for them to work properly:

<link rel="stylesheet/less" type="text/css" href="styles.less">

Note the use of the rel attribute on this link, you need to use the /less value, in order for LESS to work properly. If you are using HTML5 syntax, you don’t need to include the type=”text/less” and type=”text/javascript” values.

Next, you need to include LESS; you can either download it from the website and include it locally in the same way that you would include any JavaScript file, or use the following CDN link; in either case, you must include it after your .less stylesheet:

<script src = "http://cdnjs.cloudflare.com/ajax/libs/less.js/1.3.1/less.
min.js"></script>

If you get a 406 error in your browser, you may need to set a MIME (or Internet Media Type, as it is now known), as the text/LESS tags may not work properly.

We’ve seen how LESS can compile styles on the fly, but this may not be ideal if you have a very large site, or have a development process which doesn’t allow the use of creating styles dynamically. This isn’t an issue with LESS, as you can easily generate the stylesheet prior to including it within your site’s pages.

Precompiling LESS client side

In the previous section, we looked at how you can use Less to dynamically generate your compiled stylesheet from within your site. This may not suit everyone’s needs. Here, we will see some alternatives that allow us to precompile our CSS styles, so we can then include the finished results on our site.

Getting ready

Here we’re going to use the open source application WinLESS to compile a LESS file into a normal CSS stylesheet. You can download a copy of the program from http://www.winless.org. You will also need your favorite text editor. We’re going to create a typical .less file.

How to do it…

  1. Open up the text editor of your choice, and add in the following lines; save it as testprecompile.less in the folder you created from the Installing LESS section:

    .border-radius(@radius: 3px) { -webkit-border-radius: @radius;
    -moz-border-radius: @radius; border-radius: @radius; }
    .box-shadow(@x : 2px, @y : 2px, @blur : 5px, @spread : 0, @color :
    rgba(0,0,0,.6)) {
    -webkit-box-shadow: @x @y @blur @spread @color;
    -moz-box-shadow: @x @y @blur @spread @color;
    box-shadow: @x @y @blur @spread @color;
    }
    div { @color: green; background: @color; width: 300px; height:
    300px; margin: 30px auto; .border-radius(10px); .box-shadow(); }

  2. Double-click on the WinLess_1.5.3.msi file you downloaded to install it, accept all defaults, and double-click on it to open the application.

  3. Click on the Add folder button, and select the folder you created in the first step, and click on OK to add it to the folder list of WinLess. Click on the Refresh folder button to update the list on the right-hand side as shown in the following screenshot:

  4. Click on Compile to generate the CSS file; if you open the resulting CSS file, you will see the generated code as follows:

    div {
    background: #008000;
    width: 300px;
    height: 300px;
    margin: 30px auto;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.6);
    -moz-box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.6);
    box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.6);
    }

  5. As you make further changes to the .less file, WinLess will automatically update the CSS file for you; it will remain in the same folder as the .less file, until you are ready to use it in a production environment.

How it works…

WinLess is GUI front-ends to the command-line version of LESS, lessc.cmd. The GUI takes the content of the .less file, parses it, and gives a .css file as the output with the compiled CSS styles. WinLess includes an option to maintain a list of files that it will automatically monitor, so that when any are changed, it will automatically update the contents of the equivalent CSS file with the appropriate changes.

Summary

In this article we saw how to install support for LESS and how to compile CSS styles before adding adding the code to your website.

Resources for Article :

Further resources on this subject:

Packt

LEAVE A REPLY

Please enter your comment!
Please enter your name here