algo sobre less

LESS
Less permite extender CSS con un comportamiento dinámico ayudando de forma importante a todo diseñador web interesado (ahorra tiempo y bytes). Desarrollado por Alexis Sellier Less extiende CSS con variables, funciones, reglas anidadas y operaciones logrando que las hojas de estilo funcionen de manera mas inteligente y funcional. Además de ser multiplataforma y open source, Less ejecutatanto en el lado del cliente (IE 6 +, WebKit, Firefox) como en el lado del servidor, con Node.js y Rhino.
Escribir un CSS eficiente
Ese es el problema de la creación de hojas de estilos CSS, el código no es eficiente y su mantenibilidad es penosa, por decir lo menos. Que se traduce, por ejemplo, en la incapacidad de definir variables en el CSS más allá de usar la unidad 'em' de la dimensiónfísica de los elementos a estilizar.
Vamos a algo más concreto, mirando esta porción de una hoja de estilo:
1. #header {         
2.     background-color: #eee;  
3.     border: 1px solid gray;  
4.     color: #555;  
5.     padding: 8px;  
6. }  
7.   
8. #footer {     
9.     background-color: #efe;   
10.     border: 1px solid gray;  
11.     color: #666;  
12.     padding: 8px;  
13.}  
Si observamos el código CSS, nos damos cuenta que el atributo 'border' y 'padding' tiene el mismo valor para ambos selectores "#header", "#footer". 
Claro podríamos resolverlo creando una nueva clase CSS, para evitar la repetición en el código, por ejemplo:
1. .mi_borde {  
2.     border: 1px solid gray;  
3.     padding: 8px;  
4. }  
5.   
6. ....  
Y sucesivamente aplicando elestilo en el código HTML:
1. ....  
2.   
3.     ....  
4.   
5. ....  
6. ....  
7.   
8.     ...  
9.   
Sin embargo, no es una solución muy eficiente pues agregamos código al HTML. En este como otro tipo de problemas, viene a resolverlos el denominado pre-procesado CSS.
LESS deja atrás el código CSS estático tradicional e implementa un CSS dinámico que tiene la ventaja de ser muy fácilde aprender. Dentro de las principales facilidades de este lenguaje CSS dinámico se distinguen:
Uso de variables.
Anidación de Reglas y Clases.
Uso de Funciones y Operadores aritméticos.

LESS: Uso de variables
Por ejemplo, incorporar el uso de variables en el código CSS original es muy simple y directo. La sintaxis de la instrucción se hace usando el simbolo '@'' junto a una secuencia decaracteres que definen el nombre de la variable y se delimitar con el símbolo ':' para continuar con el valor de la variable finalizando la instrucción con el símbolo ';', muy similar a como se definen los estilos en el CSS tradicional.
Podemos ver un ejemplo en el código:
1. // Código en LESS  
2.   
3. // defiendo variables:  
4. @mi_borde_color: gray;  
5.@mi_borde: 1px solid @mi_borde_color;  
6. @mi_padding: 8px;  
7.   
8. #header {         
9.     background-color: #333;  
10.     border: @mi_borde;// uso de la variable 'mi_borde'  
11.     color: #555;  
12.     padding: @mi_padding;  
13. }  
14.   
15. #footer {  
16.     border: @mi_borde;// uso de la variable 'mi_borde'  
17.     color: #666;  
18.     padding: @mi_padding;  
19. }  

LESS: Anidación deClases
También podemos re-utilizar el código CSS dinámico (código LESS), incluyendo todas las propiedades CSS de una clase en otra, del siguiente modo:
1. // Código en LESS  
2.   
3. // usando Mixins:  
4. .mi_estilo (@color: #555) {  
5.     border: 1px solid gray;  
6.     color: @color;  
7.     padding: 8px;  
8. }  
9.   
10. #header {         
11.     background-color: #333;  12.     .mi_estilo;  //usando el parámetro por defecto  
13. }  
14.   
15. #footer {  
16.     color: #666;  
17.     .mi_estilo(#666);  
18. }  

LESS: Uso de Operadores Aritméticos
El uso de operadores aritméticos permiten facilidades al usar variables en LESS, especialmente útiles al calcular variaciones desde un color base.
1. @verde: #006600;  
2. @azul: #000077;  
3....