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.

  @brand-color: #4455EE;
  #header { background-color: @brand-color; }
  #footer { color: @brand-color; }
  h3 { color: @brand-color; }

• 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

Si disfrutaste nuestro artículo, siéntete libre de suscribirte a nuestro feed rss