Less es una nueva forma de codificar css, nosotros escribimos en lenguaje less y lo “compilamos” a css, digo lo “compilamos” porque en realidad no estamos pasando a lenguaje máquina ni nada parecido, sino que creamos un documento css perfectamente válido.
Como vemos con un simple cambio en el valor de la variable @colorCorporativo podemos cambiar los colores de la web entera. Al ser variables, podemos hacer operaciones simples con ellas: ¿Alguna vez habías sumado colores así? Yo tampoco…
“Pegan” un trozo de código dentro de otra clase, aceptando si queremos atributos. Mejor verlo con un ejemplo:
Ojo!! cuando compilemos el código anterior, la que parecía una clase css: .esquinasRedondeadas no aparecerá si no es dentro de otra clase que la llame:
Podemos declarar dentro de una clase, los estilos que irán dentro de ella sin tener que repetir una y otra vez el nombre de esa clase:
El resultado será:
También podemos utilizar pseudo-clases como :hover, :active o :visited de la siguiente forma:
Less.app nos soluciona la vida. Definimos la carpeta (o carpetas en nuestro disco duro) dónde vamos a guardar los archivos .less y la carpeta dónde queremos que se guarden los .css generados ¡Ya está! cada vez que modifiquemos un archivo .less de esa carpeta, Less.app se encargará de compilarlo y dejarnos un css listo para usar, simpre que no haya errores de compilación claro…
Félix Blanco
Desarrollador front-end con toques de diseño residente en Madrid. Experiencia de 6 años en todo tipo de proyectos web.
Cuentame qué necesitas :)
