Tutorial de LESS: Índice e introducción

less

Hoy es un gran día, comienzo a escribir un tutorial que te ahorrará muchas horas a corto-medio plazo a la hora de maquetar tus sitios web.

LESS te permitirá utilizar variables y, eventualmente, funciones que agilizarán tu proceso de creación.

Plan de vuelo

  1. Introducción.
  2. El uso de variables.
  3. Los Mixins.
  4. Reglas necesarias.
  5. Funciones.
  6. Divide y vencerás.

En fin, que cuando termine este tutorial tendrás un montón de información que revisar y con la que aprender una tecnología nueva.

¿Qué es LESS y por qué debería importarme?

LESS es un preprocesador de texto, como una ampliación de las hojas de estilos, que se comporta como un lenguaje de programación. Nos permite el uso de variables, funciones y operaciones aritméticas entre otras cosas.

Hemos de tener claro que LESS no reemplaza a CSS, es más, el resultado de la compilación de LESS es un fichero CSS totalmente funcional.

LESS funciona desde 2009 y, desde el último año se ha vuelto realmente popular. Hasta el punto de que el framework CSS del propio Twitter (Bootstrap) lo implementa.

No obstante, no te preocupes si aún no entiendes el concepto completamente, a lo largo del tutorial irás entendiendo mejor qué es LESS y cómo puede utilizarse.

Recursos disponibles

Una de las cosas que suelen preocuparnos a la hora de implementar una tecnología son los recursos disponibles, las herramientas de las que disponemos para "jugar".

El primer sitio que siempre recomiendo es lesscss.org , donde hay muy buena información y tutoriales bastante ricos en contenido.

Si te defiendes con el inglés, es posible que te interese echarle un ojo al tutorial de introducción a LESS de Smashing Magazine

Y, si te gusta la aventura, también puedes ir a Google y buscar por "LESS", seguro que no ves el horizonte.

Es una tecnología del lado cliente o del lado del servidor

Aquí podría contestar con cosas raras y técnicas, pero prefiero decir que es una buena pregunta y responder que pertenece a ambos.

Para implementar LESS podemos utilizar tecnologías del lado cliente y del lado servidor.

Para implementarlo del lado cliente tenemos que guardar nuestros ficheros con la extensión .less (fichero.less) e incorporarlo a nuestro HTML tal y como hacemos con un CSS.

<link rel="stylesheet/less" type="text/css" href="fichero.less"/>

Una vez que tenemos esto hecho sólo nos falta agregar el fichero LESS.js que compilará nuestro código LESS para convertirlo en un fichero CSS.

<script src="less.js" type="text/javascript"></script>

Por otro lado, podemos instalar el compilador directamente en nuestro servidor y que él se encargue de convertirlo a CSS. Pero eso es para otra entrada, en este tutorial me limitaré a explicarte el método sencillo, el del lado cliente.

Compiladores que nos facilitan la vida

Less.app y LiveReload como compiladores en Mac funcionan realmente bien (lo siento usuarios de Windows, podéis probar SimpLESS).

LESS.app se ha convertido en Codekit (de pago), pero es una inversión que vale la pena, al igual que LiveReload.

Existen muchas herramientas que nos ayudan a compilar nuestros ficheros LESS, pero las que he probado son estas y me funcionaron bien.

En la siguiente entrega: El uso de variables (En construcción).

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

*

DARÍO BALBONTÍN FERNÁNDEZ es el Responsable del tratamiento de los datos personales del usuario y le informa que estos datos serán tratados de conformidad con lo dispuesto en el Reglamento (UE) 2016/679 de 27 de abril (GDPR) y la Ley Orgánica 3/2018 de 5 de diciembre (LOPDGDD), por lo que se le facilita la siguiente información del tratamiento: Fin del tratamiento: mantener una relación comercial y el envío de comunicaciones sobre nuestros productos y servicios. Criterios de conservación de los datos: se conservarán mientras exista un interés mutuo para mantener el fin del tratamiento y cuando ya no sea necesario para tal fin, se suprimirán con medidas de seguridad adecuadas para garantizar la seudonimización de los datos o la destrucción total de los mismos.Comunicación de los datos: No se comunicarán los datos a terceros, salvo obligación legal. Derechos que asisten al usuario: Derecho a retirar el consentimiento en cualquier momento. Derecho de acceso, rectificación, portabilidad y supresión de sus datos y a la limitación u oposición al su tratamiento. Derecho a presentar una reclamación ante la Autoridad de control (agpd.es) si considera que el tratamiento no se ajusta a la normativa vigente. Datos de contacto para ejercer sus derechos: contacto@dariobf.com.

¡Únete ya a BFLabs GRATIS! Estreno próximamente... Más información