Tutorial de LESS: Índice e introducción
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
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).
