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.
últimos comentarios