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. #namespaces en Less CSS" href=".//diseno-web-2/namespaces-less-css">Cómo usar 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

20 comentarios

  • Excelente aporte, creo que lo pondre a prueba (LESS) en mi siguiente proyecto web, se mira bastante interesante!!

  • Por favor Ivan, me sumo al blog, espero en la proxima publicacion como enviar las variables a la a hoja de estilo lessCss

  • ¡Una grandísima idea!. Me parece que es algo muy práctico y que yo echaba en falta.
    Gracias.
    P.D.- Por favor, corrige en el primer párrafo «cada cada hora el onceavo día del mes.» Has puesto dos veces «cada» y no es onceavo (1/11) sino undécimo.
    De nuevo, gracias por este magnífico blog.

    • Gracias por el comentario y la corrección. No he vuelto a retomar el reto pero espero retormalo pronto ya con algunas ideas nuevas, saludos.

  • La verdad es que CSS se vuelve más potente pero cuando descubres LESS te das cuenta de sus limitaciones. LESS no solo hace que seamos más productivos sino que hacen las hojas de estilo más comprensibles. Hay otros compiladores LESS muy interesantes sobre todo WINLESS la versión hermana de LESS app para WINDOWS, muy recomendable. Gran post.

  • Esta interesante yo puedo CSS3 y ya habia pensado en la posibilidad de que el lenguaje avanzara a esta escala de tener variables es muy posible que tambien pase a una fase donde se integre con Ruby On Rails o Python de manera que se elimine a Ajax, bueno esa es mi loca idea , esperamos que siga evolucionando por el bien de la comunidad !!!

  • Muchas gracias por el tutorial, rapido y eficiente. Me has aclarado algunas dudas y por supuesto adios al CSS jeje un abrazo

  • hola, muy buena esta entrada: solo tengo un comentario o inquietud : dices que no es recomendable usar LESS del lado del cliente para producción, de esta manera ¿recomiendas o no el uso de BootStrap para proyectos de gran magnitud?

    • Es un mal entendido, me refiero a que no recomiendo usar el compilador javascript de Less para sitios web para producción. Porque quiere decir que cada visita que haga a tu blog requerirá que compilé los estilos, es muy ineficiente y solo se recomienda mientras desarrollas (incluso yo te recomendaría que ni allí). Ahora, respecto a LessCSS si recomiendo su uso para la mayoría de sitios web, al final el resultado que genera es el conocido CSS.

  • Muy interesante la introducción a Less. Creo que está bueno aprenderlo y ver bien de qué se trata. En lo personal hasta ahora no lo he usado.

    Aprovecho para compartir una guía gratuita que escribimos sobre CSS. También presenta conceptos básicos con algunos ejemplos. Espero que les sea de ayuda sobre todo a aquellos que están comenzando.

    http://www.glidea.com.ar/blog/guia-basica-de-css

  • Hola, quisiera saber en que parte de mi documento HTML coloco los archivos .less
    Espero su respuesta, muchas gracias.

Comments are closed.