febrero 11, 2012

Cómo compilar estilos LESS CSS

Después de los dos artículos anteriores, sobre Less CSS y las ventajas sobre CSS, pienso que ya estan bastante convencidos y toca entrar en detalles sobre cómo comenzar a trabajar con LESS CSS.

LESS CSS como muchos lenguajes de programación requiere de un interprete o aplicación que lo compile para que pueda ser utilizado, por si solo no funciona.

Simpleless

Es una aplicación multiplataforma (Windows, Mac y Linux) que permite monitorear una hoja de estilos less y cada vez que realizamos un cambio en la hoja de estilos, o en alguna de las hojas externas que utilice, compilará una nueva versión CSS de la misma. Es un proceso bastante sencillo y muy rápido.

Además Simpleless incluye compresión de estilos para ahorrar espacio y respeta la sintaxis para conservar comentarios importantes (los que tienen un signo de admiración después de /*! ejemplo */).

Por defecto compilará los estilos CSS en la misma carpeta que los estilos less, pero en el caso de que la carpeta de estilos less tenga una «hermana» llamada «css» los estilos serán almacenados allí. Es bastante básico pero algunos podrían pasarlo por alto y tampoco está documentado.

Actualmente es el cliente que estoy utilizando y lo recomiendo bastante.

Enlace: Simpless | http://wearekiss.com/simpless

Crunch!

Crunch! no solo compila estilos LESS sino además permite editarlos y por ser una aplicación desarrollada con Adobe Air es multiplataforma.

Enlace: Crunch | http://crunchapp.net/

Less.app / Winless

Aún no he probado Less.app pero entiendo que funciona de forma muy similar a Simpleless con algunas opciones más. Winless por otra parte es el equivalente de Less.app para Windows.

Enlace: Less.app | http://incident57.com/less/

Enlace: Winless | http://winless.org/

KoalaApp

Gracias a Sergio, compart una aplicación más para compilar Less CSS. Es una app compatible con Windows, OS X (Mac) y Linux.

Enlace: Koala | http://koala-app.com/

LessPHP

LessPHP no es una aplicación gráfica, es un script (clase mejor dicho) programada con PHP que permite compilar estilos LESS y escribirlos en un directorio especifico, de esta forma se pueden realizar aplicaciones web que compilen estilos LESS, generarlos en tiempo real o almacenandolos en cache.

Compilar estilos LESS CSS con PHP no es mejor que las aplicaciones anteriores, simplemente es diferente, permite automatizar varias tareas a la manera que elijamos y al estar unido a un lenguaje programación como PHP da paso a ponerse creativo y encontrar otras formas de explotar LESS.

Enlace: LessPHP | http://leafo.net/lessphp/

Compilar en línea

Gracias a la recomendación de Xavier, también podemos incluir en esta lista compiladores de Less CSS en línea.

CSS Compiler

CSS Compiler es un sitio web que nos permite compilar estilos CSS o Less CSS en línea, sin necesidad de instalar un software adicional. Funciona en modo visitante, es decir sin necesidad de cuenta, pero ofrece la opción de crear una cuenta y administrar nuestros propiso archivos de estilo. Como comenta Xavier, CSS Compiler fue desarrollado por la misma persona que desarrollo el plugin Knews para WordPress.

Enlace: CSS Compiler | http://www.csscompiler.com

Compilar desde línea de comandos

Además de las opciones anteriores LESS se puede compilar desde línea de comandos, usando Winless o una de las aplicaciones listadas en el wiki: Command Line use of LESS.

 

Más aplicaciones

Pueden ver una lista de aplicaciones actualizada en el wiki de LessCss e incluso colaborar agregando algun otra que conozcan: GUI compilers that use LESS.js.

 

5 comentarios

  • Gracias Iván, excelente blog.
    Uso Linux.
    En relación a los compiladores, aparentemente hubo muchos problemas de compatibilidad en la versión de SimpLess para Linux, por lo que ya no lo ofrecen en esa versión.
    El mejor compilador GUI que encontré para este OS es Koala: http://koala-app.com/
    Ojalá sirva el aporte!

  • Hola, estoy iniciandome en bootstrap 3.3.2, he instalado Nodejs y less para compilar los ficherso less de bootstrap, el fichero reponsive-utilities.less me da error en la lines 32, he compilado los ficheros bootstrap.less (style.css) y responsive-embed.less (responsive-embed.css ) sin ningun problema sabria usted por favor el porque de este error y como solucionarlo, deantemano muchas gracias y un cordial saludo.
    pd:utilizo windows xp.

Comments are closed.