Tutorial: Compilar LESS con Sublime Text 2

En este tutorial, voy a explicar cómo configurar Sublime Text 2 para compilar código LESS, y no utilizar algún otro software.

Tendremos que instalar unos plugins y hay que seguir el siguiente proceso:

Con esto tenemos instalados todos los plugins necesarios para poder compilar código LESS.

Ahora hagamos un ejemplo.

1.- Creamos un nuevo archivo en la ubicación que deseemos: "ejemplo.less"

2.- Agregamos código LESS

3.- Guardamos nuestros cambios

4.- Aparecerá en la misma ubicación un archivo llamado "ejemplo.css" con el código ya compilado.

  • Paso 1. CMD/CTRL + SHIFT + P (CMD en mac o CTRL en windows) Aparecerá un cuadro de diálogo en el que vamos a escribir "pi" y después oprimimos ENTER. Esto quiere decir que vamos a seleccionar "Package Control: Install Package". Se muestra un nuevo cuadro de diálogo.

  • Paso 2. En el nuevo cuadro de diálogo vamos a escribir la palabra LESS, donde nos aparecerá:

    LESS - Que nos ayudará con el resaltado de la sintaxis básica de CSS para LESS. Lo instalamos con un ENTER.

  • Paso 3. Repetimos el paso 1 y 2, pero ahora aparecerá:

    LESS Build - El sistema que compilará dicho código para convertirlo a CSS. Lo instalamos con un ENTER.

     

  • Paso 4. Repetimos el paso 1 y en el nuevo cuadro de diálogo escribimos "SublimeOnSaveBuild".

    SublimeOnSaveBuild - Se encargará de ejecutar la compilación inmediatamente después de guardado un archivo LESS.