Productividad en CSS, como manejar LESS

Seguramente haya mucha gente que conozca los preprocesadores de CSS que están sacando últimamente o quizás sea la primera vez que lo haga cuando lean este post, pero lo que si que está claro es que las nuevas formas de trabajar de cara a la realización de una web se están optimizando cada vez más y se está pareciendo a un lenguaje de programación estructurado.

 Si bien es cierto que hasta ahora la mayor parte de la maquetación de un portal web normalito se intentaba hacer una reutilización de estilos y llegaba un momento en el cual ya no se podía averiguar si el estilo al que se aplicaba ya lo habíamos creado o no, se nos plantean unas dudas si realmente se estaba codificando correctamente o existiría algún "Manual de buenas prácticas" para llevarlo a cabo.

Por suerte en la actualidad podemos contar con excelentes herramientas que nos pueden ayudar a desarrollar nuestro sitio de la manera más cómoda como nos sea posible. Este es el caso de LESS.

LESS es un preprocesador de CSS, y me preguntareis ¿qué es eso de un preprocesador CSS?, bien, un preprocesador es un programa externo a nuestro editor de textos que prepara nuestro código hecho con sintaxis del mismo para generar otro entendible por el navegador, básicamente se trata de un compilador. Estos preprocesadores nos permiten tener un código más organizado, utilizar variables, realizar operaciones, y demás elementos como si de un programa de software se tratase

En el mercado existen muchos preprocesadores como LESS, Sass, Compass, CSS Truth, Turbine, Switch CSS, etc. pero particularmente me quedo con el primero (LESS) ya que su sintaxis es sencilla y utiliza Javascript, mientras que por ejemplo Sass lo hace con Ruby. Como digo, realmente es una cuestión de gustos.

Bueno basta ya de tanta teoría y pasemos un poco por los conceptos básicos que utiliza este compilador de CSS para que podáis decidir si realmente puede merecer la pena el pasarse a esta forma de trabajo, empecemos!

Primer paso: Instalación

Para este ejemplo vamos a integrar LESS con nuestro editor favorito Sublime Text 2, y para ello debemos comenzar instalando los paquetes correspondientes "LESS" y "LESS-build" con el Package Control Command + Shift + P (Para Mac) o Ctrl + Shift + P (Para Windows)

El primero de ellos es el interprete de comandos de LESS mientras que el segundo paquete es el preprocesador de LESS.

Para los usuarios de Mac, si es la primera vez que lo utilizais, primeramente deberéis instalar el compilador "lessc" que no viene con el paquete instalado.
Para mí la forma más sencilla ha sido descargarme el paquete NodeJS para MAC y despues ejecutar el siguiente comando en una terminal "npm install -g less".

Una vez instalado los paquetes, reiniciamos el editor y ya podemos empezar a codificar en LESS.

Segundo paso: A practicar!!

El lenguaje de LESS es muy fácil de poder asimilarlo y como os contaba anteriormente permite una codificación limpia, así que para empezar comenzaremos con lo básico.

Las variables

Las variables se definen con una "@" delante del nombre de la variable que podremos utilizar a lo largo de todo el documento, por ejemplo para declarar una variable se realiza de la siguiente forma:

    /* CÓDIGO LESS */
    //@variable: valor;
    @gris: #CCC;
    .prueba {
        border: 1px solid @gris
    }
    /* RESULTADO */
    .prueba {
        border: 1px solid #CCC;
    }

Con esta sentencia tenemos declarado una variable para reutilizarla en cualquier lugar

Los mixins (reutilización de clases)

Se trata de otra de las cosas muy útiles a la hora de codificar las clases, y es que cuando un elemento posee las propiedades las cuales necesita otro elemento, para no escribir más código se podría invocar al elemento así:

/* CODIGO LESS */
    .clase1 {
        border: 1px solid red;
    }
    //Invocamos la clase1
    .clase2 {
        .clase1
    }
    /* RESULTADO */
    .clase1 {
        border: 1px solid red;
    }
    .clase2 {
        border: 1px solid red;
    }

He aquí la pericia del desarrollador si le conviene más el agrupar las clases ".clase1, .clase2" conforme los archivos CSS de siempre o realizar este tipo de codificaciones.

Los argumentos

Al igual que todos los lenguajes de programación, existe un apartado que es para el paso de variables en una función, en este caso se ha querido realizar algo similar para no tener que estar escribiendo el mismo valor en las propiedades, veamos un ejemplo:

    /* CODIGO LESS */
    .esquinas (@radio:5px) {
       border-radius: @radio;
      -moz-border-radius: @radio;
      -webkit-border-radius: @radio;
    }
    /* RESULTADO */
    .esquinas {
       border-radius: 5px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
    }

Cabe mencionar que el ámbito del argumento solo es válido para la clase o identificador que se esté utilizando, no puede ser invocada por ningún otro identificador y/o clase, a no ser que se declare de forma global. El valor del argumento se podrá utilizar si es combinado con los mixins que se ha hablado en el apartado anterior.

Además pueden pasarse tantos argumentos como se quiera, aunque en el ejemplo solo se haya utilizado uno. Para añadir más de un argumento bastará con que se encuentren separados por comas

Operaciones

Otra de las cosas que nos permite hacer LESS es realizar operaciones con las variables. Por ejemplo si tienes un margen que quieres reutilizar para todos los elementos y quieres reutilizarlo para uno en concreto pero aumentándolo o disminuyéndolo, veamos como se hace:

/* CODIGO LESS */
    @base-margin: 25px;
    #header { margin-top: @base-margin + 10px; }
    /* RESULTADO */
    #header { margin-top: 35px; }

Al igual que con los márgenes, LESS también permite la adicción o sustracción de cantidades hexadecimales para emplearlas con el color:

    /* CODIGO LESS */
    @azul: #00c;
    @azul_claro: @azul + #333;
    @azul_oscuro: @azul - #333;
    /* RESULTADO */
    @azul: #00c;
    @azul_claro: #33F;
    @azul_oscuro: #009;

Para poder ver el ejemplo habrá que crear una propiedad que contenga las variables para que podáis ver el cambio.

Espero y deseo que este tutorial os haya permitido haceros una idea de como funciona un preprocesador, como instalarlo y como utilizarlo de manera correcta. Si necesitáis más información echarle un vistazo a la página oficial de LESS en la cual vienen explicadas muy bien las sintaxis empleadas.