Ayer descubrí LESS como parte del Bootstrap de Twitter. Me ha encantado bastante por el uso de variables y operaciones en CSS.
http://lesscss.org/#-client-side-usage
¿Alguien lo ha usado?
Este código en LESS:
Código CSS:
Ver original// LESS
@the-border: 1px;
@base-color: #111;
@red: #842210;
#header {
color: @base-color * 3;
border-left: @the-border;
border-right: @the-border * 2;
}
#footer {
color: @base-color + #003300;
border-color: desaturate(@red, 10%);
}
Se transformaría en esto en CSS:
Código CSS:
Ver original/* Compiled CSS */
#header {
color: #333;
border-left: 1px;
border-right: 2px;
}
#footer {
color: #114411;
border-color: #7d2717;
}
Para proyectos muy grandes me parece buenísima idea para escalarlos y declarar variables al inicio.
Es necesario compilarlo ya sea via node.js o en el mismo navegador.