Over a million developers have joined DZone.

LESS is More: The Dynamic Stylesheet Language

DZone's Guide to

LESS is More: The Dynamic Stylesheet Language

· Web Dev Zone ·
Free Resource

Learn how error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.

Woow!!! That is the word that best defines Less.

From time to time someone creates something really useful with a touch of magic. John Resig creates jQuery, not the only one neither the first one, but it is the most famous JavaScript library.

Now, Alexis Sellier (alias cloudhead) has created the amazing Less tool which can be defined as “The dynamic stylesheet language”.

LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions

A brief sample

Imagine a web project with many lines of CSS defining your nice styles about buttons, borders, backgrounds, etc. Image you have a nice #aaaaaa color shared among many elements (borders, text color, …). What happends if you decide to change that color? you need to rewrite the color code on every place you put it.

The magic of Less allows you to define a color variable and use it around. Later if you decide to change the color, simply change the variable value.

How it works?

Instead create CSS files you need to create LESS files, they are similar to CSS bit more “powerful” (you can use variables, functions, …).

Less library is responsible to read the LESS file and create a CSS file for you.

How to use

You can use LessCSS in different ways. Developing it is best to use the “dynamic” way, that is, include the Less JavaScript code in your page a LESS file and let Less code to create and “inject” the generated CSS in your page.

In a production environment, once set the LESS file, it is better to compile it to a CSS and include this last.


Source: http://acuriousanimal.com/blog/2011/08/29/a-word-about-less/

What’s the best way to boost the efficiency of your product team and ship with confidence? Check out this ebook to learn how Sentry's real-time error monitoring helps developers stay in their workflow to fix bugs before the user even knows there’s a problem.


Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}