Compilar LESS en Notepad++

Si lo sé, lo sé, lo sé. Me he desaparecido un largo tiempo de éstas tierras, tras andar perdido ayudando a Elijah Baley y R. Daneel en la búsqueda de quien trata de perjudicar a los robots, haber viajado 3k de años para terminar en Lusitana tratando de evitar «otro» xenocidio, y terminar tratando de comprender las discusiones filosóficas de Oliveira y Traveler. Heme aquí de vuelta, tirando código y tratando de ayudar con algún tutorial.

El buen «Neo» (no el de Matrix) ha dejado a un lado Notepad++ y me ha recomendado otro editor atom ya que en éste puedes compilar algunos archivos como SASS y LESS (Lenguaje de hojas de estilo dinámico), pero fiel a mis creencias he decidido continuar en Notepad++ ya que lo tengo configurado para compilar y ejecutar JAVA, me dí a la tarea de investigar y hacerlo funcionar compilando LESS. Y he aquí los pasos (Para «uindos»).

Instalar Node.JS

  • Descargar y ejecutar el instalador node.js
  • Ir a las «variables de entorno» de nuestro equipo y comprobar que nodejs y npm están agregados a la variable PATH.
  • Crear una carpeta donde irán nuestros LESSs y CSSs (ej. C:\Users\GianBros\less_css)

Instalar el módulo LESS

  • Abrir el «command prompt» de Node.js
  • Navegar con ‘cd’ hasta llegar a nuestra carpeta creada en la sección anterior (ej. cd C:\Users\GianBros\less_css)
  • Ejecutar el comando: npm install less
  • Si ocurriese el error «Error: ENOENT, stat ‘C:\…\AppData\Roaming\npm» deberemos de ir a la dirección del error y crear manualmente la carpeta ‘npm’ (sin las comillas) y volver a ejecutar el comando anterior. (Solución en inglés)
  • Buscar el archivo lessc.cmd (ej. C:\Users\GianBros\less_css\node_modules\.bin\lessc.cmd )

Crear el comando de ejecución en Notepad++

  • Abrir Notepad++ e ir a «Ejecutar» y clic en «Ejecutar…».
  • Pegar el siguiente texto (incluyendo las comillas): «C:\Users\GianBros\less_css\node_modules\.bin\lessc.cmd» -x «$(FULL_CURRENT_PATH)» > «$(CURRENT_DIRECTORY)\$(NAME_PART).css»
  • Recuerda reemplazar la línea «C:\Users\GianBros\less_css\node_modules\.bin\lessc.cmd» por la ruta de tu archivo lessc.cmd y la variable (CURRENT_DIRECTORY) por si deseas otra ruta de tu archivo .css de salida.
  • Clic en Guardar e introduce un nombre para identificarlo (con ese nombre aparecerá en la pestaña «Ejecutar»)
  • Puedes introducir un acceso rápido «ALT+shift+F5» por ejemplo.
  • Escribe tu primer Hola mundo en un archivo .less y ejecuta el comando anterior. Ej. [code]@brand-color: #4455EE;
    #header { background-color: @brand-color; }
    #footer { color: @brand-color; }
    h3 { color: @brand-color; }[/code]
  • Si todo es correcto te habrá creado un archivo .css con el mismo nombre de tu archivo .less en donde hayas guardado el archivo .less.
  • Si hubiese algún error reinicia Notepad++ y deberá de funcionar sin problemas.

Fuente de sodas