¿Qué es Less CSS? Aprende a usarlo

LESS CSS es un framework jQuery que extiende nuestras hojas de estilo CSS y lo transforma a un lenguaje de programación utilizando funciones, variables, mixins y operaciones aritméticas. Nos será útil a la hora de acelerar el proceso de creación de una hoja de estilo, para ahorrarnos lineas de código y además para enriquecer de manera más fácil nuestro sitio web.

¿Cómo instalo LESS CSS?

Lo primero que tenemos que hacer es crear un archivo con la extensión .less, lo nombraremos style.less(el nombre puede ser cualquiera pero siempre respeten que debe tener la extensión .less). Este archivo deberá ir si o si arriba de less.js para que funcione correctamente. Recuerden que deben colocarlo dentro de las etiquetas <head> en nuestro html.

Si se fijan en el código notarán que lo llamamos igual que llamaríamos a un archivo CSS, la diferencia que encontramos es que el atributo rel está establecido en "stylesheet/less".

No se olviden que para hacer funcionar un plugin jQuery deben tener la librería jQuery que la pueden llamar desde Google Apis y Code jQuery.

Usando LESS CSS

VARIABLES

Las variables nos permiten especificar un valor para poder re-usarlo a través de toda la hoja de estilo, logrando hacer cambios globales con solamente cambiar una línea de código.

El CSS compilado se vería así

MIXINS

Los mixins nos permiten embeber las propiedades de una clase dentro de otra con solamente incluir el nombre de la misma.

En el #footer lo que hicimos fue re-declarar la clase .rounded-corners con el valor 10px para que el border-radius fuera de 10px y no de 5px como viene predefinida en la clase. En la compilación se ve así:

REGLAS ANIDADAS

En lugar de construir nombres largos con varios selectores, LESS te da la posibilidad de anidar los selectores dentro del elemento parent para crear una estructura clara con un CSS más corto.

Las selectores anidados se verían así en la compilación

OPERACIONES

Las operaciones te dejan añadir, sustraer, dividir y multiplicar valores y colores, dándonos el poder de establecer elementos proporcionales de otros ya creados. Siendo más claros, con solamente una operación podemos dejar un color más oscuro o más claro proporcionalmente en su gama de color.

En el ejemplo se aprecian varias operaciones que se pueden hacer para obtener un efecto deseado. Vamos a ver en la compilación, cual sería el resultado.

Para darles una idea, si se fijan en lo que sería el archivo .less para el color de texto en #header multiplicamos el @base-color cuyo valor es #111 por 3, lo que nos dio en la compilación un color #333.

Descarga
Modificado por última vez el día 26 de diciembre de 2012 a las 07:17
Scroll to top