Throughout this book, we're going to look at a variety of exercises that are designed to help you get accustomed to working with the basics of the LESS CSS preprocessor language. You're probably wondering what we're going to cover, right? No problem! Let me reveal it all!

Installing Less (Must know): We'll kick off with arguably the most important part of the book, how to install support for LESS; as you'll see later, it is really easy!

Precompiling LESS client side (Must know): While LESS will allow you to compile your CSS styles on the fly, there may be occasions where you want to do this before adding the style code to your site. I'll show you an example of how to do this using one of several applications available.

Precompiling LESS server side (Must know): The beauty of LESS is that you can create your CSS shorthand manually and leave the server to turn this into your compiled code automatically. In this recipe we'll see how to do this using LESS.

Compiling back to LESS from CSS (Should know): You've taken over a site and want to use LESS to help with your CSS development work but are thinking, " How do I rework it into the equivalent LESS code?" It's easy! I can use css2less, surely? Sure, you can, but are the results as good as you might expect?

Autorefreshing using watchr (Must know): As you use LESS, you will no doubt need to fine-tune your styles. This may mean having to recompile the LESS file each time. This little trick will update any changes to styles in the browser, as and when you make them to the LESS code.

Using LESS variables (Must know): Now that we have the installation part of LESS out of the way, let's now focus on looking at how LESS works. We begin with creating simple variables that you can then use to define values in much the same way as you might in any programming language.

Using mixins in LESS (Must know): A useful part of LESS is the ability to include properties from one set of rules into another. In this task I'll show you how to achieve this, and build on it, so that your mixins can accept parameters, or even work out which values to show, based on the outcome of one or more conditions.

Parametric mixins in LESS (Must know): Mixins are a valuable part of LESS; they will help you reduce the amount of code you need to type, as you can reuse code from existing projects. This is great, but there will be occasions when you may want to vary values used in your mixins. In this exercise you will see how you can turn your mixins into dynamic ones, by harnessing the power of parameters.

Pattern-matching in LESS (Must know): So far, we will have looked at how you can create mixins and variables to help reduce the amount of code you need to type each time. However, we can take it even further by controlling what shows and when—welcome to the world of pattern-matching in LESS!

Using JavaScript evaluation in LESS (Should know): You can take advantage of the power of JavaScript within LESS. This opens up some real possibilities, such as getting the screen width, or changing text from lower case to upper case. I'll show you some examples of what you can do, as well as show some of the pitfalls of using JavaScript within your LESS files.

Importing files and escaping code in LESS (Must know): Importing CSS styles into a site usually means a lot of round trips to the server but not with LESS; LESS builds up one CSS source, based on any files that it needs to import, which saves on trips to the server.

Using JavaScript operators in LESS (Should know): Normally, you would need to work out each value for each CSS style and it could be a time-consuming process; using LESS, we can get the server to work them out automatically for us, saving a lot of time, particularly if we need to update a value later!

Creating colors with functions in LESS (Should know): We can do similar things with colors using LESS; imagine choosing one color, then using LESS to work out a whole color scheme for us; this recipe will show you how easy it is to do this.

Grouping/nesting styles in LESS (Should know): I'll bet that over time, you've probably had to write a lot of repeated code, particularly for those styles that were inherited, right? You can avoid the need to do this with LESS; this recipe will show you how you can use nested styles to cut down the code you need to write.

Scoping in LESS (Should know): We can also use the power of scoping in LESS. We can override preset variables used in one mixin with another instance of that variable; LESS will work out which one to use, depending on where it has been scoped in the LESS code.

Using LESS with other libraries (Become an expert): The beauty of LESS is that it helps you become more efficient when writing CSS; it works equally well when used in conjunction with other libraries such as Modernizr. In this demo, we will look at using LESS and Modernizr to style a sample web page, which will produce visually acceptable results on a wide range of browsers.

Using pre-built mixin libraries (Become an expert): Once you are more familiar with LESS, there is a whole world of things you could achieve, even if it is purely to help introduce a more modular approach to your code-writing. In this recipe we're going to harness the power of LESS to rework the code for some progress bars, which you can then reuse in your future projects.