Primeros pasos con LESS

¡Buenas!, hacía ya algún tiempo que no tenía tiempo de subir ninguna entrada, ya sabeis, en las temporadas de exámenes no hay demasiado tiempo para investigar y publicar :).

Pues bien, hoy vamos a hablar un poco sobre LESS.

LESS es un pre-procesador de CSS que acabo de conocer, y la verdad es que parece que mejora bastante el flujo de trabajo, con esta herramienta, entre otras cosas, podremos ahorrar bastantes líneas de código al escribir css, así como hacer nuestros archivos más legibles, para más información, puedes visitar la web de proyecto 😉

http://lesscss.org

Bien, para introducirnos un poco, voy a exponer algunos ejemplos con los que estoy probando en estos momentos 🙂

En esta ocasión vamos a trabajar con sublime-text y algún plugin de LESS.

Si aún no tienes instalado Sublime-text, una rápida búsqueda en Google lo solucionará 😉

Una vez instalado Sublime Text hay que instalar Node.js. Pueden ver como hacerlo en este comentario https://encodingthecode.wordpress.com/2013/07/03/primeros-pasos-con-less/comment-page-1/#comment-1389

Bien, una vez instalado, vamos a instalar los plugins, de la siguiente manera:

0. Pegar el código en la consola de Sublime Text 2 (view > show Console) y reiniciar el editor.

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')

1. Entramos a sublime-text y presionamos Ctrl+shift+p
2. Seleccionamos la opción “Package Control: Install Package”
3. Buscamos e instalamos ‘LESS’
4. Repetir pasos 1 y 2 e instalar ‘LESS Build’
5. Repetir pasos 1 y 2 e instalar ‘SublimeOnSaveBuild’
6. Repetir pasos 1 y 2 e instalar ‘less2css’

Bien, si hemos llegado a este punto, estamos en condiciones de poder empezar a trabajar 😉

A continuación paso a explicar 3 ejemplos de uso:

– Variables

Para todo aquel que conozca algún lenguaje de programación, sabrá la importancia de las variables y el código que nos ahorran, algo similar ocurre con LESS, por ejemeplo, con este sencillo código:

@color: blue;

h1{
  color: @color;
}

h2{
  color: @color;
}

Estaríamos ahorrando tiempo, pongamos un ejemplo, tenemos 10 objetos que utilizan el color azul, y queremos cambiarlo por amarillo, ¿Cambiamos uno a uno todos los colores? ¡No!, simplemente con cambiar el valor de la variable @color tendríamos listo el proceso 🙂

El código anterior equivaldría a:

h1{
  color: blue;
}

h2{
  color: blue;
}

– Mixins

Si lo extrapolamos a algún lenguaje de programación, vendrían a ser como los procedimientos, aunque no exactamente, lo que hacen, a grandes rasgos, es evitar que tengamos que repetir un código en diferentes objetos del CSS, pongamos el típico ejemplo de que tenemos dos cajas cuyo borde queremos que sea redondeado:

.redondear_borde(@radio: 5px){
  border-radius: @radio;
}

#caja1{
  .redondear_borde(); //Si no pasamos ningún valor, se establecerá 5px
}

#caja2{
  .redondear_borde(15px);  //En este caso @radio valdría 15px
}

Este código equivaldría a:


#caja1{
  border-radius: 5px;
}

#caja2{
  border-radius: 15px;
}

Como podemos observar, con dos objetos no se aprecia gran diferencia, pero se nota cuando tienes muchos objetos a los cuales quieres aplicar un mismo estilo css.

– Sentencias anidadas

Muchas veces es necesario aplicar estilos a objetos que están contenidos en contenedores, por ejemplo, aplicar un color rojo a los enlaces contenidos en un article, para ello, también podemos utilizar LESS, de la siguiente manera:


article{
  //estilos_para_el_article...
  a{
    color: red;
  }
}

que equivaldría a:

article {
  //estilos_para_el_article...
}

article a {
  color: red;
}

Como podemos comprobar de nuevo, bastante útil esta herramienta, ¿no?

Bien, por último, pero no menos importante, os preguntareis: ¿Y cómo se usa esto?, pues bien, sigamos estos pasos:

– Creamos un archivo con extensión less, por ejemplo: ‘style.less”, en la misma carpeta de nuestro proyecto.
– En el index.html vinculamos una hoja de estilos con el hombre ‘style.css’.
– Abrimos style.less con sublime-text y escribimos lo que necesitemos, y automáticamente al guardar, se nos generará el archivo style.css procesado, que será el utilizado por el navegador.

Fácil, ¿no? 🙂

Puede que al guardar os de un error como este:
“less2css error: ‘lessc’ is not avavailable’

Nos lo arroja por que nos falta el archivo lessc, podemos arreglando si nos vamos a la ventana de comandos (linux, por supuesto xD) y escribiendo:

sudo apt-get install node-less

Bien, espero que os haya gustado el post y que os haya sido de ayuda, en caso de que tengais dudas, no teneis más que comentar 😉

HackSaludos!

Anuncios

Acerca de Darkvidhck

Estudiante de ingeniería informática, haciendo mis pinitos como desarrollador web, programador, gamer y Linuxero. Aficionado a la seguridad. Eterno viciado al conocimiento.
Esta entrada fue publicada en Diseño y desarrollo WEB. Guarda el enlace permanente.

23 respuestas a Primeros pasos con LESS

  1. Daniel LD dijo:

    Hola que tal, mira instale los paquetes necesarios para compilar el less, sin embargo cuando trato de guardar el archivo me sale el siguiente error: “less2css error: [Error 2] El sistema no puede encontrar el archivo especificado”, y en la consola de sublime sale lo siguiente: “Writing file /C/AppServ/www/find/css/ejemplo.less with encoding UTF-8
    [less2css] Converting C:\AppServ\www\find\css\ejemplo.less to C:\AppServ\www\find\css\ejemplo.css
    error: less2css error: [Error 2] El sistema no puede encontrar el archivo especificado”.
    Se me hace rato puesto que tengo otra maquina con el mismo SO (windows 8) y funciona bien. Espero me puedas ayudar, no se si me falta algo o que onda.

    • Darkvidhck dijo:

      He estado buscando algo de información, pero la verdad no encontré demasiado, prueba a crear un archivo nuevo y vuelve a intentarlo, mientras me apunto el tema para buscar algo más de info.

      Saludos!

    • Tali dijo:

      Es raro que pase en Windows pero puede ser tema de permisos de escritura. Prueba a crear tu mismo pero vacío el archivo “C:\AppServ\www\find\css\ejemplo.css”

    • Darkvidhck dijo:

      Hola de nuevo, estuve buscando un poco más pero sin suerte, hay gente con ese problema pero en ningún sitio he visto solución, lo único que se me ocurre es que reinstales python y less2css y pruebes de nuevo :S

      Siento no poder ayudarte más

      Saludos!

    • Héctor dijo:

      Buenas noches, buena la info, tengo el mismo problema error: less2css error: [WinError 2] El sistema no puede encontrar el archivo especificado en Windoes 7 64 Bit. Lo pudiste resolver ?

      • Tali dijo:

        Has probado cerrando sublime (y en extremo reiniciando el sistema) ? Parece que es problema de instalación pero no encuentro mucho en Google. Si encuentro la solución la publicaré aquí, igual si vosotros la encontráis compartidla por favor.

  2. Héctor dijo:

    Sigue sin ir :S y lo reinicié, no encuentro nada ni en español ni en ingles que solucione esto

    • Darkvidhck dijo:

      La verdad yo tampoco encontré nada, lo único que se me ocurre es que vuelvas a reinstalar python y less, ¿te especifíca algún archivo de log o algo por el estilo de donde se pueda sacar más info?

      Saludos!

      • Héctor dijo:

        Hola, lo cierto es que no instalé python pero doy por hecho que en los paquetes de control
        1. Entramos a sublime-text y presionamos Ctrl+shift+p
        2. Seleccionamos la opción “Package Control: Install Package”
        3. Buscamos e instalamos ‘LESS’
        4. Repetir pasos 1 y 2 e instalar ‘LESS Build’
        5. Repetir pasos 1 y 2 e instalar ‘SublimeOnSaveBuild’
        6. Repetir pasos 1 y 2 e instalar ‘less2css’

        vendrá incluido cierto ?
        Nada en la consola solo sale eso, el error salta al crear un archivo e ir a guardarlo como .less

      • Tali dijo:

        Hola Héctor. Pude replicar el error en una instalación nueva y ya encontré el problema. Falta por instalar Node.js. Hazlo de la siguiente manera. Baja de http://nodejs.org/download/ la versión de node.js para tu sistema y la instalas. Una vez instalado vete a todos los programas, buscas node.js y abres el prompt, esto es la consola de node.js y ejecutas lo siguiente:

        npm install less -g

        Una vez ejecutado esto haces esta prueba

        lessc style.less > style.css

        Si no te da ningún error todo esta bien. Cierras (es mejor que lo tengas cerrado durante la instalación de Node.js) y abres de nuevo Sublime Text 2 y ya no debe darte el problema. Avisa si te funcionó.

      • Héctor dijo:

        Si te entendí bien una vez instalado el nodejs (que lo tenía instalado sólo que no había tocado consola) .
        lo abro e introduzco este código: npm install less -g
        y luego este: lessc style.less > style.css

        y me salen unos …
        Luego vuelvo al Sublime Text y nada si guardo un archivo como less sigue pasando lo mismo.
        Cabe mencionar que estoy con la versión 3

      • Tali dijo:

        Yo lo hice con Sublime Text 2 y me funcionó tio. La versión 3 está aún en beta, necesitas obligadamente usar esa?. Si no es así, prueba con la versión 2 para ver que pasa. Por cierto si al hacer lessc style.less > style.css te salen cosas raras algo hay mal con tu node o instalación de less porque NO debe arrojar nada por consola.

      • Héctor dijo:

        Gracias por la ayuda,voy a ello, mi duda es instalo sólo el node.js o también los paquetes de aquí arriba ?

        “1. Entramos a sublime-text y presionamos Ctrl+shift+p
        2. Seleccionamos la opción “Package Control: Install Package”
        3. Buscamos e instalamos ‘LESS’
        4. Repetir pasos 1 y 2 e instalar ‘LESS Build’
        5. Repetir pasos 1 y 2 e instalar ‘SublimeOnSaveBuild’
        6. Repetir pasos 1 y 2 e instalar ‘less2css’”

      • Tali dijo:

        Ok, Si instalalo todo, el tutorial está bien, lo único es que antes de comenzar a instalar la extensión de LESS en Sublime Text, Node.js y LESS deben estar instalados en el sistema como te mencionaba en el otro comentario. Lo demás lo hice tal cual está en el post.

    • Tali dijo:

      Yo tampoco encuentro nada. Has probado reinstalando?

  3. Héctor dijo:

    A) Instalo Sublime 2
    B)- Instalo Node.js (con Sublime 2 cerrado) e introduzco en su consola: npm install less -g
    y me sale este mensaje: npm should be run outside of the node repl, in your normal shell. .
    -Si debajo introduzco lessc style.less > style.css simplemente aparecen unos puntos … y no ocurre nada.
    – Cierro consola Node.js

    C) -Inicio Sublime 2 y pongo:
    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’)

    -Salgo

    D) LESS
    1. Entramos a sublime-text y presionamos Ctrl+shift+p
    2. Seleccionamos la opción “Package Control: Install Package”
    3. Buscamos e instalamos ‘LESS’ (salgo una vez instalado)
    4. Repetir pasos 1 y 2 e instalar ‘LESS Build’
    5. Repetir pasos 1 y 2 e instalar ‘SublimeOnSaveBuild’
    6. Repetir pasos 1 y 2 e instalar ‘less2css’

    La unica diferencia es que con sublime 2: si le doy a control+s para guardar nuevo archivo en la pestaña tipo ya me aparece LESS (*.less;*.css) cosa que en el sublime text 3 beta NO.

    Aun así al guardar como less salta el mismo error, sólo que ahora si en el archivo escribí por ejemplo @fondo #bbb ahora #bbb se colorea por lo que deduzco me está reconociendo el valor.

    Lo unico que no entiendo es arriba que pone que si me lanza este error: Ve a la Ventana de comandos (linux, por supuesto xD) y escribiendo:

    sudo apt-get install node-less

    Este código sudo apt-get install node-less lo tengo que introducir en la consola del sublime, en la de node.js o en la de windows ?

    Gracias por la ayuda 🙂 a ver si con un paso más ya soluciono esto

    • Tali dijo:

      Hola Héctor, dos cosillas. Primero, Si estás en linux/MAC el comando del apartado B), tienes que hacerlo desde la consola de Linux/MAC, no desde la consola de Node (Esto es en Windows, perdona, no sé porque pensé que estabas en windows). Y en segundo lugar, tu pregunta acerca de “sudo apt-get install node-less”, si, eso es en la consola de Linux, NO de Node.js. Espero que con eso ya te corra bien. Nos cuentas!

  4. HLeon dijo:

    Al final eliminando el paquete less2css e instalando prepros para compilar me va perfecto 🙂

  5. Javier dijo:

    Esto es increible. Busque muchos tutos para que me funcione, pero este tiene la posta 😉 Gracias gente

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s