Recursos para sacar el máximo partido a LESS

Hoy queremos compartir con vosotros la herramienta LESS para mejorar el código CSS y que estamos empezando a utilizar en varios proyectos web que tenemos actualmente en desarrollo.

Hemos empezado a usar LESS, porque es parte de Twitter Bootstrap, un conjunto de herramientas front-end para el desarrollo rápido de aplicaciones web.

Twitter Bootstrap es un conjunto de CSS y HTML que utiliza algunas de las técnicas más modernas para ofrecer plantillas para maquetar, estilos estilos para tipografías, formularios o botones en una librería (de apenas 6k con gzip). Conseguimos una serie de características extras como las declaraciones anidadas, mixins, operaciones y funciones de color. Es fácil de implementar en el código tan sólo incluyendo la declaración en la cabecera y usar los componentes disponibles.

LESS extiende CSS para dotarlo de un comportamiento dinámico a través de variables, mixins, operaciones y funciones. Para utilizarlo no se necesita nada especial. La idea detrás de la herramienta es que el navegador interpreta código CSS normal y corriente producido a través de un proceso de compilación de nuestras plantillas escritas en LESS.

Lo único que cambia es la forma que tenemos de compilar las plantillas LESS:

1. Si usamos un servidor Web basado en Node.js, hay dos opciones:
• Podemos servir las hojas de estilo CSS a través de un script en cualquier lenguaje como PHP, Python, Ruby o Perl (entre otros);
• Podemos compilar nuestras plantillas LESS en tiempo de ejecución (del servidor) utilizando para ello Node.js
2. También podemos utilizar el script less.js que podemos descargar directamente desde la página del proyecto para compilar el archivo LESS desde el propio cliente.
• A diferencia del método anterior, estaríamos utilizando ciclos de CPU del cliente en lugar del servidor para compilar el código.
• Es muy importante que incluyamos primero las hojas de estilo. El script compilará nuestro archivo LESS y añadirá un elemento stylea nuestro DOM con el código compilado listo para su uso.
3. Existe además otra manera que es la que recomendamos que consiste en compilar previamente nuestras plantillas LESS con el LESS Compiler (lessc) o herramienta similar para generar los archivos CSS necesarios y después incluirlos normalmente en nuestro documento. También podemos crear el archivo minimizado.

LESS es una poderosa herramienta con la que crear hojas de estilo en cascada se convierte en una parte más del proceso de desarrollo de software al elevar a CSS al nivel de lenguaje de programación. Habla mucho a su favor que su curva de aprendizaje es muy suave y por tanto no podemos más que recomendarlo.

 

Algunos recursos para sacar el máximo partido a LESS:

LESS: Home del proyecto LESS.

• “The dynamic stylesheet language. LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (Chrome, Safari, Firefox) and server-side, with Node.js and Rhino.”

Least: Convierte código CSS a LESS.

• “Least helps you move from your old-fashioned CSS files to something shiny: CSS pre-processors!”

Node.js: Descargas para node.js que hacen más fácil el uso de LESS.

• “Node.js is a platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.” 

CRUNCH: Compilador y editor online de código LESS (require Adobe Air).

• “The LESS editor and compiler that almost makes it too easy.” 

Less APP para Mac OS: Compilador de código LESS bajo Mac OS.

• “{Less} extends CSS with variables, nested rules, operators and more. If you’re still building websites without it, you’re an idiot. This app makes it dead simple to use {Less} by automatically compiling *.less files into standard CSS.” 

CodeKit para Mac OS: IDE para LESS bajo Mac OS.

• “CodeKit automatically compiles Less, Sass, Stylus, CoffeeScript, Jade & Haml files. It effortlessly combines, minifies and error-checks Javascript. It supports Compass. It even optimizes jpeg & png images, auto-reloads your browser and lets you use the same files across many projects. And that’s just the first paragraph.” 

SimpLess para Windows, Mac OS y Linux:

• “It’s easy to understand why thousands of developers use SimpLESS. It compiles your *.less files into valid CSS.”

WinLess para Windows: Compilador para Less e integración en Visual Studio.

•  “WinLess is a Windows GUI for LESS.js. WinLess is a must-have for the webdeveloper who uses Windows.”  

Adobe Shadow: Permite visualizar páginas web en distintos dispositivos móviles.

• “Adobe® Shadow is a new inspection and preview tool that allows front-end web developers and designers to work faster and more efficiently by streamlining the preview process, making it easier to customize websites for mobile devices.”