Pair program with me! profile for carousel at Stack Overflow, Q&A for professional and enthusiast programmers

3/14/2013

LESS - dynamic stylesheet language for developers

So less saved my soul :) Why ? And what is less ?

Let's start with our wiki definition:

LESS is a dynamic stylesheet language designed by Alexis Sellier.

The most important part of this definition is that less is dynamic stylesheet language.
Traditionally, CSS belongs to a group of languages called "declarative langugages"Declarative languages are those which describes computation in terms of what needs to be done and not how. That means that your responsibility as a developer is just to declare language constructs, that will be interpreted or compiled later.
Declarative languages have no notion of memory, which strictly separates them from imperative programming languages.
HTML and SQL are  examples of widely used declarative languages.
So you can't for example put a HTML  value in a variable and do some operation on that variable, without a help of imperative language.

But, with the help of less, we can treat our CSS values dynamically, and create more powerfull formatting for our apps.

Let't see some examples:

/*   assign a value to a variable, and use it everywhere */

@color: #eb5200;

p{
    color:@color;
}

div.main{
    color:@color;
}

/+ now both p, and div share a same color value */


Mixin is another powerfull feature of less:

/*basic class with variable value*/
.some_class{
    color:@color;
}

/*extend div.main class (mixin) with .some_class properties */
div.main{
    .some_class;
}

There are more advanced topics like nesting, mixpaths, arguments and functions which you can read here.

Css is more of a designers stuff.  I am not a designer,
 so less helped me  to do formatting part of development in  a more programmatic fashion.

Happy Coding.

No comments:

Post a Comment