A style sheet language is one which describes how a document has to be structured and styled. The most widely used style sheet language is CSS and is mostly used for styling web pages written in HTML. If you have developed even a simple web page, you would have definitely come across CSS and would have used it in some form. CSS plays an important role in the success of modern web applications with rich UI. CSS has gone through various iterations with the latest one being CSS3. However, there are some limitations with CSS. We can’t do dynamic stuffs like interpolating a property based on a variable, re-using a property value across classes, etc. Less is an extension to CSS with dynamic behaviour such as variables, mixins, operations and functions. We can write complex CSS styles with Less. Do more with Less.
Highlights:
Variables. This is a very useful addition to CSS. In most of our CSS files, we would have some repeating values like color, font-size, etc. With Less, we can define global variables for these values and use them across the classes.
Mixins. Mixins allow you to embed all the properties of a class into another class by simply including the class name as one of its properties. It’s just like variables, but for whole classes.
Nested Rules. Often, we write some complex selectors which are lengthy and hard to read. With Less, you can simply nest selectors inside other selectors. This will improve the readability and makes inheritance clear.
Functions & Operations. Sometimes we would need to write a class in proportion to an existing class, for example a class for hover will have properties opposite to that of its base class. With Less operations (add, subtract, multiply and divide) on property values, you can build a complex relationship between properties.
How to use Less?
Less can be used on the client side (on browser) as well as on the server side (using Node.js).
-
On the client side, we need someone to understand Less syntax and converts them to browser understandable CSS. This is done by
Less.js which needs to be included on the client side. Less files are saved with .less extension and can be linked to your page with
rel attribute set to ‘
stylesheet/less’. Make sure the style sheet is included before loading Less.js. The only drawback with this approach is that the conversion happens every time the page is loaded.
-
On the server side, we can pre-render Less files to CSS and serve the compiled CSS files. This is more efficient than doing it on the client side. You need to have Node.js installed to do this pre-rendering. Check out more info
here. If you are on Mac, you can use
this app.
Browser Support
Since Less uses basic JavaScript techniques, almost all the browsers support Less - IE 6+, Webkit and Firefox.
I have been using Less for quite sometime now and it seems to be very handy. Who else uses this? Twitter uses Less in its UI toolkit Bootstrap. Try it out yourself. Do more with Less. The source for Less is available here under Apache License. Know more about it here.
-- Varun
