LESS CSS Preprocessor

Exclusive offer: get 50% off this eBook here
Instant LESS CSS Preprocessor How-to [Instant]

Instant LESS CSS Preprocessor How-to [Instant] — Save 50%

Practical, hands-on recipes to write more efficient CSS, with the help of the LESS CSS Preprocessor library with this book and ebook

$12.99    $6.50
by Alex Libby | May 2013 | Open Source Web Development

In this article by Alex Libby author of Instant LESS CSS Preprocessor How-to, we will take you on a journey through using the LESS library file as a CSS preprocessor language, and show you how the little power of JavaScript can make a positive impact on your CSS development workflow.

(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:


Instant LESS CSS Preprocessor How-to [Instant] Practical, hands-on recipes to write more efficient CSS, with the help of the LESS CSS Preprocessor library with this book and ebook
Published: February 2013
eBook Price: $12.99
See more
Select your format and quantity:

About the Author :


Alex Libby

Alex Libby is from an IT support background. He has been involved in supporting end users for the last 15 years in a variety of different environments, and currently works as a Technical Analyst, supporting a medium-sized SharePoint estate for an international parts distributor, based in the UK. Although Alex gets to play with different technologies in his day job, his first true love has always been with the Open Source movement, and in particular experimenting with CSS/CSS3 and HTML5. To date, Alex has written five books based on jQuery, HTML5 Video, and CSS for Packt Publishing, and has reviewed several more (including one on Learning jQuery). jQuery UI 1.10: The User Interface Library for jQuery is Alex's sixth book with Packt Publishing.

Books From Packt


 Designing Next Generation Web Projects with CSS3
Designing Next Generation Web Projects with CSS3

Ext JS 4 Web Application Development Cookbook
Ext JS 4 Web Application Development Cookbook

Responsive Web Design with HTML5 and CSS3
Responsive Web Design with HTML5 and CSS3

HTML5 and CSS3 Transition, Transformation and Animation
HTML5 and CSS3 Transition, Transformation and Animation

HTML5 and CSS3 Responsive Web Design Cookbook
HTML5 and CSS3 Responsive Web Design Cookbook

Dreamweaver CS5.5 Mobile and Web Development with HTML5, CSS3, and jQuery
Dreamweaver CS5.5 Mobile and Web Development with HTML5, CSS3, and jQuery

HTML5 Canvas Cookbook
HTML5 Canvas Cookbook

Responsive Web Design by Example
Responsive Web Design by Example


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
5
6
G
r
E
E
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software