Preprocesadores de CSS II: LESS

En el post anterior introducimos el concepto de preprocesadores CSS. En esta entrada vamos a profundizar en los usos típicos de un caso concreto, el de LESS.

Lo primero que vamos a detectar es que se trata de una herramienta que está escrita en javascript (aunque también disponible en otros lenguajes) y por tanto se trata de un preprocesador con capacidad para actuar directamente en el navegador del cliente, pero por favor, no lo hagáis, o un gatito llamado rendimiento morirá.

Su uso principal será durante la fase de desarrollo haciendo uso de node.js  para procesar los ficheros. Así una vez instalado vía npm podremos hacer uso de el a través de nuestra consola de comandos. Aunque, siempre que puedas automatiza este proceso ya sea con tu IDE favorito o con un gestor de tareas como Grunt.js. Te sorprenderá la rapidez de compilado de LESS en node.js.

La utilidad más básica que podemos encontrar en LESS son las variables/constantes. Pero además una de las características que más me gustan es la definición de reglas de forma anidada, haciendo que nuestros selectores no tenga que repetir a todos sus padres cada vez que escribamos un nuevo elemento.

Otra funcionalidad realmente útil (y usada) es la de los mixins, que podríamos llamar “plantillas” ya que su principal función es la de generar propiedades de forma reutilizable. Todo es mejor con ejemplos:

 

Otra fuente de ejemplos para lo anterior puede encontrarse en el repositorio de Twitter Bootstrap en su versión LESS.

Para mantener nuestros archivos en un tamaño contenido, o simplemente divididos en diferentes componentes, tenemos la posibilidad de importar archivos dentro de otros. Esto nos permitirá realizar buenas prácticas, teniendo separadas las variables generales, así como los mixins disponibles, para importar en el resto de archivos. Además usaremos esta capacidad para unificar todos los estilos en un único fichero usando múltiples @import.

Como último punto de esta entrada comentaremos que LESS incluye por defecto funciones para la transformación de datos, conversiones de unidad, escapado de texto, matemáticas.. todas ellas las podrás encontrar en la documentación oficial.

Existen más funcionalidades pero estas son las principales. Para más detalle la página oficial es rica en documentación.

 

 

You may also like

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies