¿Que es LESS?

LESS es un pre-procesador de CSS, por su traducción al español nos encontramos con “Menos”, y si nos damos cuentas LESS es una nueva forma de tener un CSS  “Menos” complicado por decirlo de alguna forma.

LESS, es una extensión del CSS, al cual le añade nuevas características muy útiles que se presentaran más adelante, como son las variables, los mixins, el poder utilizar funciones entre otras.

Iniciando con LESS

Si deseamos iniciar utilizando LESS solo necesitamos un editor de Texto  y recordar que no se guardará con .css, sino con .less, dentro de este .less podremos incluir todo el CSS que deseamos.

Para poder compilarlo existen diversas formas, se puede utilizar el compilador de la Google API, si utilizamos este método solo es necesario agregar lo siguiente a nuestro HTML:

Otra forma más segura es para evitar problemas seria compilar nuestros archivos LESS con algún programa y después ya compilado utilizas solo los .css resultantes

Para esta forma existen muchos programas gratuitos como:

• SimpleLESS: http://wearekiss.com/simpless
• winless: http://winless.org/

Ventajas en LESS

Ahora si continuando con las ventajas que nos ofrece LESS veremos algunos ejemplos muy útiles.

Utilizando Variables:

Todo programador está familiarizado con el uso de variables y LESS nos da una gran ventaja con ellas, y solo es necesario poner un @ para poder utilizarlas ya sea para poner un color, una medida e incluso texto – @Variable: Valor;

Y para utilizarlas seria de la siguiente forma:

El uso de las variables es realmente sencillo y permite cambiar los valores en el momento que lo necesitemos, sin tener que cambiar cada uno de estos valores por separado.

Anidando:

Otra ventaja que nos ofrece LESS es el poder anidar etiquetas, clases, id , así como las pseudoclases y el lugar de estar escribiendo cada especificación por separado podemos hacer lo siguiente:

Utilizar Mixins:

Ahora pasamos a los Mixin con los cuales se agrupan varias propiedades y se les asigna un identificador, también es posible pasarle valores atreves de parámetros:

Gracias a los Mixins se ahorra mucho tiempo y lineas escritas ya que al compilarlo cada uno se genera automáticamente con el valor que hemos pasado por el parámetro.

Operaciones y Funciones:

Después de ver las grandes cosas que ofrece LESS te sorprenderás con lo que sigue “Operaciones y Funciones”, así es, LESS nos permite realizar diversas operaciones y ciertas funciones como se muestra a continuación:

Como vemos en el ejemplo es posible realizar cualquier operación como suma, resta, multiplicación o división de colores en hexadecimal , pixeles o cualquier otra medida incluyendo porcentajes .

Por parte de las funciones LESS cuenta con varias funciones matemáticas como:

• round( );
• ceil( );
• floor( );
• percentage( );

Ademas cuenta con Funciones especiales para colores como:

•  lighten( );
• darken( );
• saturate( );
• desaturate( );
• fadein( );
• fadeout( );
• fade( );
• mix( );

Existen muchas ventajas de utilizar LESS aquí mostramos algunas de ellas y nos dimos cuenta de lo innovador y fascinante que puede ser.

Después de haber visto todas las posibilidades que nos ofrece este pre-procesador, la forma en que creemos nuestros CSS dependerá de si usamos LESS o no.