Configuración de Less en Sublime Text 2

  • Por
  • CSS
Vemos paso a paso como configurar nuestro sublime text 2 para poder compilar código en Less.

Trabajando con Linux es difícil encontrar programas que nos ayuden a compilar el código que desarrollamos en Less (Para Win y Mac hay bastantes y muy buenos) por lo que me he tenido que instalar una serie de plugins en mi Sublime Text 2 para poder trabajar con Less de la forma más cómoda posible.

Vamos a partir de la base de que todos sabemos qué es Less, cómo funciona y qué se necesita para trabajar con él.

Además, vamos a dar por sentado que todos tenemos instalado Sublime Text, independientemente del sistema operativo con el que estemos trabajando, ya que solo hay una pequeña diferencia entre Windows y Linux, que veremos más adelante.

Una vez sentadas las bases para poder comenzar, nos queda solo ir explicando paso a paso, qué tenemos que hacer para poder compilar código .less desde nuestro sublime text 2.

Paso 1: Instalar Package Control

Supongo que todos sabemos ya lo que es Package control" y lo tenemos instalado, pero si no es así, es tan sencillo como abrir la consola de Sublime text (view → show console) y pegar el siguiente código:

import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print('Please restart Sublime Text to finish installation')

Sólo nos falta reiniciar el Sublime text 2 para tener instalado Package Control.

Paso 2: Instalación de plugins necesarios

Para instalar plugins tan sólo tenemos que ir a "Preferences → Package Control → Install Packages".

Nos saldrá un listado de todos los plugins que podemos instalar, buscaremos e instalaremos los siguientes plugins en el siguiente orden:

  1. LESS
  2. LESS build
  3. SublimeOnSaveBuild
  4. less2css
Una vez que tenemos los cuatro plugins instalados, reiniciamos sublime para que no se nos quede nada mal instalado ¡y listo! Ya podemos trabajar con Less desde Sublime sin problemas.

Paso 3: Compilar los .less

Para compilar un archivo .less no necesitamos nada más que guardar nuestro archivo, automáticamente sublime lo compilará y creara un .css con el mismo nombre que el archivo .less en la misma carpeta donde se encuentra el archivo .less.

Nota: Si al guardar os aparece un error del tipo "less2css error: ‘lessc’ is not avavailable (Linux)" o "error: less2css error: [WinError 2] El sistema no puede encontrar el archivo especificado (Windows)", os dire que en Linux lo podemos solucionar ejecutando en la terminal el siguiente comando:
sudo apt-get install node-less

Mientras que en Windows la única solución es desinstalar todo y volver a repetir todo el proceso (investigando he visto que a veces se soluciona de esta forma)... aunque es raro que os de este error en windows.

Además, me gustaría comentar, aunque creo que ya lo sabéis si estáis trabajando con Less que si tenéis varios archivos .less que se llaman entre sí, siempre debéis compilar el principal, el que llama al resto, para que se cree bien la compilación y no os de errores del tipo de que no esta definida una variable, etc. y no compile Sublime.

Autor

Sara Alvarez

Equipo DesarrolloWeb.com

Compartir

Comentarios

jrobles666

17/1/2014
Solución al error "El sistema no puede encontrar el archivo especificado" en windows
Parece que en Window es necesario instalar LESS.js for Windows (https://github.com/duncansmart/less.js-windows) y añadirlo al PATH del sistema para evitar el error "El sistema no puede encontrar el archivo especificado". Como indica el la documentación del plugin sublime-less2css (https://github.com/timdouglas/sublime-less2css)

Camilo

19/3/2014
Buenísimo, pero..
¿cómo se hace para que salga minificado el css utilizando ST2?

Aclaro que yo pude solucionar el error en windows instalando node.js y luego en consola escribiendo:
npm install less -g

Y listo !

Camilo

19/3/2014
Corrección
Perdón gente, ahí vi que compila directametne minificado el CSS. Espectacular !!!

Ato

25/4/2014
LESS y SFTP
Este artículo está genial, me ha servido de mucho para usar Less en mi trabajo.
El único inconveniente que tengo ahora es que yo suelo usar el plugin SFTP para editar directamente código en el servidor, y claro, cuando guardo el archivo less me lo sube al servidor pero no me sube la copia css que genera.

Chris Aramayo

29/6/2014
Opcion más sencilla
Muy buena opción, pero es mas sencillo solo instalar solo los paquetes less y less-build.
Ya que Sublime Text puede compliar en automatico sin más.
En el menu de Sublime Text ir a Tools>Build System>LESS (Marcar para que se compile).
Y en automatico cada ves que se guarde un archivo .less se creara un .css en la misma carpeta con el mismo nombre pero más sencillo.

P/D: En Sublime Text 2 esto funciona perfecto. ST3 tiene un pequeño problema lo pueden resolver mirando este video que encontre buscando alternativas. https://www.youtube.com/watch?v=E9I_ziIC84c

Andres

20/3/2015
Duda
Una pregunta, ¿Cómo hago para ejecutar y compilar c++ en sublime text2?. Siempre me sale "g++ no se reconoce como comando interno o externo...". he buscado diferentes maneras, he instalado Mingw y nada.

Miguel

28/4/2016
Error
En mac me sale
less2css error: "lessc" is not available
ya instale less2css, lessc y las todas las demás! :C