Beginning css preprocessors

Chapter 4

Development with Less

In the previous chapter, you looked into various things you can do with Sass, including various techniques 

like mixins. In this chapter, you will look into another preprocessor framework that’s equally famous, 

named Less.

This chapter explores the following aspects of Less:

•  Client and server-side variation of less

•  Language features

•  Nested rules

•  Import directives

•  Mixin guards

•  Referencing the parent selector

•  Using & with guards

•  Detached rules

•  Merging properties

•  Looping mixins

•  Functions

Introduction to Less

Less is a preprocessor language that gets compiled into CSS. It was created by Alexis Sellier. Less is along 

the lines of “SCSS” syntax of Sass, which in turn is like CSS syntax. Less is open source. Less was first written 

in Ruby; however, in the later versions, it was rewritten in JavaScript. Note that valid CSS is valid Less code. 

Less provides the following features similar to Sass that you saw in previous chapter like variables, nesting, 

operators, mixins, and functions; however what makes Less different from other CSS precompilers is its 

ability to compile in real-time via less.js in the browser.

There are two variants of Less, unlike Sass. Less has a client-side variant, which compiles Less code 

in browsers and a server-side variant that compiles the file server side and then provides it to the browser. 

Developer can use the client-side variant for developing and testing code. The server-side variant can be 

used to compile the code, minify it, and then make it production-ready.

A point to keep in mind is that the client-side variant does not generate output. It compiles the code on 

each browser reload.

---

Chapter 4 

■

 Development with less

62

Client-Side Variation of Less

To use the client-side variant of Less, you need to download the client-side compiler named less.js, which 

is available at 

http://lesscss.org/#download-options

. Once it’s downloaded, copy it into your working 

directory. Now let’s try some Less code with this Less compiler.

Listing 4-1.  An HTML Markup for the Example

       

               

               

                 

       

       

               

This is my first Less code

       

   

 

 

   

Background Gradient