Welcome to LESS CSS Preprocessor How-to, where we 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.
Let's start by having a look at how CSS preprocessors work.
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.
The following steps will guide you in installing LESS:
- Let's get started by creating a new folder on your PC, let's call it
test less projects. - 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. - 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> - 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; } - 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"> - 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:
Tip
Downloading the example code
You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
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;The color value calculated for the border then compiles to valid CSS:
#submitfrm {
background: none repeat scroll 0 0 #D24444;
border: 1px solid #B02222;
color: #FFFFFF;
padding: 5px 12px;
}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>
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, as we will see in the next exercise.