Portada > LESS El lenguaje dinámico de hojas de estilo

LESS El lenguaje dinámico de hojas de estilo

¿Qué es LESS?

LESS extiende CSS para dotarlo de un comportamiento dinámico a través de variables, mixins, operaciones y funciones.

 

¿Cómo funciona?

Para utilizar LESS no necesitas un plug-in ni nada especial. La idea detrás de la herramienta es que el navegador interpreta código CSS normal y corriente producido a través de un proceso de compilación de nuestras plantillas escritas en LESS.

Lo único que cambia es la forma que tenemos de compilar las plantillas LESS. Si usamos un servidor Web basado en Node.js o bien servimos nuestras hojas de estilo CSS a través de un script en cualquier lenguaje como PHP, Python, Ruby o Perl (por ejemplo), podemos compilar nuestras plantillas LESS en tiempo de ejecución (del servidor) utilizando para ello Node.js

 

Cómo se usa

Hay varias formas de utilizar LESS CSS, una de ellas es a través de javascript del lado de servidor usando node.js, otra es utilizando javascript del lado del cliente con less.js y por último usando una aplicación que compile los estilos .less a .css.

Al iniciar a trabajar con LESS CSS es un error querer utilizar la versión de javascript del lado del cliente. Es un error porque esta versión se considero para uso en ambientes de desarrollo —al ser más rápido de corregir en caso de error—, además es lenta y aumenta el riesgo de fallar al depender completamente de javascript. Para hacer hacer experimentos locales o iniciar está muy bien pero para producción no se recomienda.

Más adelante escribiré sobre aplicaciones recomendadas para compilar .less a .css y las ventajas de cada una, pero por ahora, para comenzar, les digo que le den un vistazo a simpleless(multiplataforma), less.app (mac), o si buscan una solución a la medida pueden recurrir a Less PHP, una librería que permite compilar less css utilizando PHP permitiendo generar estilos dinámicamente, en tiempo real o creando cache.

 

Variables

Las variables nos permiten definir en un solo lugar un valor que será usado en múltiples sitios de nuestro código CSS. Esto nos permite reutilizar las variables y en caso de cambiar por ejemplo un color corporativo, tendremos que cambiarlo solo en un lugar de nuestro archivo CSS. Las variables nos permiten aplicar el principio DRY (Dont Repeat Yourself).

 

 

// LESS
@color: #a8b317;
a {
color: @color;
}
h2 {
color: @color;
}

 

El código LESS anterior se convertiría en el siguiente código CSS al compilarse.

 

// CSS
@color: #a8b317;
a {
color: #a8b317;
}
h2 {
color: #a8b317;
}

 

se pueden utilizar operaciones, por lo tanto podemos sumar, restar, multiplicar y dividir variables:

 

@minWidth: 20%;
@columnLeft: @minWidth * 2;
@columnRight: @columnLeft + @minWidth;
@color: #4a785b;
.sideLeft {
background-color: @color + #111;
width: @columnLeft;
}
.sideRight {
background-color: @color;
width: @columnRight;
}

 

LESS entiende la diferencia entre un color o una unidad al realizar operaciones, lo cual es una pasada. El código anterior daría como resultado al compilarse:

.sideLeft {
background-color: #5b896c;
width: 40%;
}
.sideRight {
background-color: #4a785b;
width: 60%;
}

 

Con LESS puedes hacer esto y mucho más…

  • Los Mixins: te permiten embeber todas las propiedades de una clase dentro de otra clase simplemente incluyendo el nombre de la misma como una de sus propiedades.
  • Reglas Anidadas: Cuando programamos en LESS no es necesario que escribamos largos selectores para especificar la herencia de nuestras reglas. Podemos usar selectores anidados dentro de otros selectores. Esto convierte a la herencia en algo limpio y elegante.
  • Funciones de color: LESS nos ofrece una variedad de funciones para transformar colores. Primero son transformados aHSL y después son manipulados a nivel de canal.
  • Emulación de Javascript: Se pueden evaluar expresiones JavaScript dentro de los archivos .less, para ello, es necesario envolver la expresión con back-ticks (acentos cerrados)
<!--:es-->Retail Strategy para Càrniques Masó<!--:-->

Retail Strategy para Càrniques Masó

Entrevista a Rodrigo Cernadas y David Garcia, socios fundadores de Lifting Group

Entrevista a Rodrigo Cernadas y David Garcia, socios fundadores de Lifting Group

Lifting Group invitado a ‘Google Partners: Accelerate’, evento exclusivo para las agencias líderes de Europa

Lifting Group invitado a ‘Google Partners: Accelerate’, evento exclusivo para las agencias...

Lifting Group asiste a las jornadas del Mobile Labs Google

Lifting Group asiste a las jornadas del Mobile Labs Google

<!--:es-->Imagine Creative Ideas revitaliza la imagen de Pasqual Arnella<!--:-->

Imagine Creative Ideas revitaliza la imagen de Pasqual Arnella

<!--:es-->La firma londinense Album Artists, nuevo cliente de Lifting Group<!--:-->

La firma londinense Album Artists, nuevo cliente de Lifting Group

<!--:es-->Anyvan contrata a Parliando para la promoción de su página web española<!--:-->

Anyvan contrata a Parliando para la promoción de su página web española

Nueva página web para el bufete de abogados Graells March

Nueva página web para el bufete de abogados Graells March

Casos de éxito de Parliando (I): Serhs

Casos de éxito de Parliando (I): Serhs

<!--:es-->Estrategia de marca de Imagine y Lifting Consulting<!--:-->

Estrategia de marca de Imagine y Lifting Consulting

BigTranslation, partner corporativo de Lifting Group para la traducción SEO de contenidos

BigTranslation, partner corporativo de Lifting Group para la traducción SEO de contenidos

Seguimos creciendo: ¡Nuevas oficinas en París!

Seguimos creciendo: ¡Nuevas oficinas en París!

Acierta seguro el día del Padre con PerfumeriaVIP

Acierta seguro el día del Padre con PerfumeriaVIP

Nueva oficina de Lifting Group Valencia

Nueva oficina de Lifting Group Valencia

Cuatro maneras de usar el vídeo para posicionamiento SEO creativo

Cuatro maneras de usar el vídeo para posicionamiento SEO creativo

Los 8 puntos clave para el éxito del Marketing Outsourcing

Los 8 puntos clave para el éxito del Marketing Outsourcing

Lifting Group celebra su Academy sobre Adwords y WordPress 2

Lifting Group celebra su Academy sobre Adwords y WordPress 2

Editorial septiembre: Nuevo curso, avanzando con extra de energía

Editorial septiembre: Nuevo curso, avanzando con extra de energía

CONTACT US