Qué es LESS CSS y cómo funciona

Bienvenido a la primera edición de uptoeleven — un reto personal de publicar once entradas sobre un mismo tema cada  hora el undécimo día del mes.

LESS CSS

LESS CSS es una ampliación a las famosas hojas de estilo CSS, pero a diferencia de estás funciona como un lenguaje de programación, permitiendo el uso de variables, funciones, operaciones aritmeticas, entre otras, para acelerar y enriquecer los estilos en un sitio web.

LESS CSS no reemplaza a CSS, de hecho el resultado final es una hoja de estilos css completamente funcional y compatible, simplemente ofrece mejoras en el área de desarrollo, por lo que usarlo se vuelve recomendable si quieres ahorrar tiempo de desarrollo, utilizar caracteristicas avanzadas de estilos y para ahorrarte trabajo —de allí su nombre: less css (menos css).

Caracteristicas de LESS CSS

Las caracteristicas de LESS CSS son demasiadas, e incluso combinandolas pueden conseguir más, sin embargo, intentaré mencionar las más notables:

Variables

Las variables en less funcionan de forma similar a las constantes en los lenguajes de programación, permitiendo definir valores que podrán ser reutilizados en cualquier parte de la hoja de estilo, e incluso entre otras hojas de estilo. Su sintaxis es la siguiente:

@variable: valor;

Mixins

Los mixins son, como a mi me gusta llamarlos, clases dinámicas, porque funcionan de forma similar a las clases CSS pero con caracteristicas de funciones de programación. Es decir que pueden ser llamadas desde otras clases para obtener su valor y además permiten parametros, aunque no es necesario utilizarlos. Está caracteristica  hace posible definir una clase dando flexibilidad para variar algunos estilos como el color o tamaño del elemento. Su sintaxis, en el caso de que usemos parametros,  es la siguiente:

.mi_mixin(color: valordefecto){
  font-size:2em;
  color:@color;
  margin:0.2em;
}

Funciones de color

Las funciones de color son funciones pre-definidas de Less CSS que permiten alterar un color, para hacerlo más claro, oscuro, saturado, desaturado, cambiarle la tonalidad, etc. Son una gran herramienta para definir una paleta de colores sin estar buscando códigos de color. Las funciones de color son:

  • lighten para aclarar un color.
  • darken para oscurecerlo.
  • saturate para saturarlo, o “aumentar el color”.
  • desaturate para desaturarlo, o “reducir el color”.
  • fadein para resaltarlo quitandole transparencia.
  • fadeout para disimularlo usando transparencia.
  • fade para cambiar la transparencia a 50%.
  • spin para cambiar el tono de color.
  • mix para mezclar dos colores.

su sintaxis es similar a está:

lighten(@color, 30%);
darken(@color, 30%);

Mantene sintonía con el blog para más información acerca de cada una de estas caracteristicas y cómo aprovecharlas mejor.

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 LessPHP, una librería que permite compilar less css utilizando PHP permitiendo generar estilos dinámicamente, en tiempo real o creando cache.

¡Ya, comenza a usar LESS CSS! http://lesscss.org/

Indíce

  1. Qué es LESS CSS y cómo funciona
  2. LESS CSS vs CSS
  3. Cómo compilar estilos LESS CSS
  4. Mixins ¿Y eso con qué se come?
  5. Cómo usar #namespaces en Less CSS
  6. Cómo organizar estilos usando Less CSS
  7. Librerias de estilos Less CSS
  8. Acelerar la creación de sprites con Less CSS
  9. Cómo compilar LESS CSS usando PHP
  10. Snippets para trabajar con Less CSS
  11. Manipular colores usando LESS