> Manuales > Entorno de trabajo del desarrollador web

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.

Sara Alvarez

Equipo DesarrolloWeb.com

Manual