Tecnología y Coaching para Emprendedores

Aprende a Utilizar LESS, un Potente Preprocesador de CSS

less css

La semana pasada descubrí los preprocesadores de CSS, primero pensé que qué narices era esto de preprocesadores, si el CSS se procesaba sólo, pero luego indagando un poco más me di cuenta de lo mucho que puede facilitar el trabajo el uso de un preprocesador de CSS, así de como se pueden crear hojas de estilo CSS optimizadas y fáciles de mantener.

La facilidad de uso del CSS es ideal para principiantes en su uso, pues tiene una curva de aprendizaje muy sencilla. El problema viene cuando el proyecto empieza a crecer y los estilos se empiezan a multiplicar. Empezamos a tener un montón de código duplicado por todas partes y cuando queremos cambiar algo, tenemos que volvernos locos con el Ctrl+F de nuestro editor de textos. ¿Lo has vivido alguna vez? Yo cada vez que quiero cambiar algo del diseño de esta web me vuelvo medio loca con el buscar y reemplazar. Y aquí es donde entra en juego un preprocesador de CSS, pues te permite crear un código mucho más limpio y fácil de mantener.

Preprocesadores de CSS

Existen varios preprocesadores de CSS, los más conocidos son LESS y SASS o una segunda versión de SASS que es SCSS. Me imagino que la preferencia por uno o por otro es más una cuestión de gustos que otra cosa, yo me he decidido por LESS por tener una sintaxis más limpia que SASS y porque funciona con JavaScript, mientras que SASS lo hace con Ruby. Además, instalar el compilador LESS ha sido cosa de coser y cantar con Sublime Text v.2, aunque COMPASS, un framework de CSS , funciona sólo con SASS. En fin, es tema de gustos, igualmente, si quieres una comparativa a fondo, te recomiendo esta de Chris Coyier en que compara LESS y SASS desde una perspectiva a fondo.

LESS

En este tutorial te enseñaré a utilizar LESS para que veas con tus propios ojos como puede ayudarte a crear mejores hojas de estilos CSS.

Instalación de LESS

Para utilizar LESS debemos usar un editor de textos que nos permita guardar archivos con la extension .less, así como tener instalado un compilador de LESS que nos transforme el código de los archivos .less a .css. Te recomiendo utilizar el editor de textos Sublime Text v.2, que además de ser multiplataforma te permite instalar dos plugins para que te reconozca los archivos de LESS y los compile, tal y como puedes ver en este tutorial de Sublime Text.

Otra manera en que podemos compilar el código de LESS es con el compilador de la Google API. Para ello, añadiremos este código a nuestros archivos HTML:


<link rel="stylesheet/less" href="/stylesheets/style.less" type="text/css" />
<script src="http://lesscss.googlecode.com/files/less-1.0.30.min.js"></script>

¿.. y si el JavaScript está desactivado..?

Este código sólo lo utilizaría en modo local en el entorno de desarrollo, porque más de 1 de cada 100 usuarios navegan con JavaScript desactivado, con lo que estos usuarios verán una página web sin CSS.

Lo mejor en caso de utilizar esta opción es compilar el archivo LESS a CSS, minimizar el CSS y poner el enlace al archivo CSS en lugar de al de LESS:


<link rel="stylesheet/css" href="/stylesheets/style.css" type="text/css" />

Ventajas del uso del preprocesador LESS

Veamos algunas ventajas del uso del preprocesador de CSS LESS, así como ejemplos prácticos.

Una estructura más limpia y fácil de mantener

Veamos de qué manera LESS nos permite crear una estructura más limpia y fácil de mantener que si trabajamos directamente con CSS. En CSS no podemos anidar id’s y clases, lo que implica tener que sobreescribir el código mil veces y que cuando queremos cambiar algo tenemos que hacerlo de manera repetida en varios sitios. Un ejemplo lo mostrará más claramente:


header {}
header nav {}
header nav ul {}
header nav ul li {}
header nav ul li a {}

Vamos, que el header nav se repite más que el ajo. LESS solventa este problema y crea un código mucho más usable y fácil de mantener al permitir el anidamiento, lo que además nos ahorra un montón de tiempo. Así, con LESS tenemos:


header {
   nav {
      ul {
         li {
            a {
            }
         }
      }
   }
}
 

El motivo por lo que lo pongo anidado con un corchete en cada fila es para facilitar la comprensión de lo que es el anidamiento de id’s y clases en LESS. Por eso mismo tampoco he puesto nada de contenido, para facilitar la comprensión.

Quizás la primera vez que trabajemos con esto lo veamos un poco raro, pero te aseguro que cuando lleves un par de días utilizando LESS (u otro preprocesador de CSS), te preguntarás por qué no lo utilizaste antes.

Anidamiento de pseudoclases

LESS no sólo te permite el anidamiento de id’s y clases, sino también el anidamiento de pseudoclases, tal y como este ejemplo muestra:

a {
  &:hover {}
  &:active {}
  &:visited {}
}

Como vemos, simplemente hemos de añadir el símbolo & antes de los dos puntos de la pseudoclase.

Uso de variables

Si eres desarrollador web, entonces ya sabes lo útil que es el uso de variables para crear un código limpio y fácil de mantener. Y si eres diseñador web, quizás al leer que LESS utiliza variables ya te hayas asustado. Si aún me estás leyendo, no te preocupes, que de verdad que es muy fácil el uso de variables en CSS y si tienes alguna duda, dejas un comentario, que yo te ayudo, ya lo sabes.

¿Para qué variables? Para crear un código mucho más fácil de mantener. Te pongo un ejemplo de la práctica diaria. Imagínate que has puesto el mismo color en varias cosas, como en algunos bordes, en algunas fuentes y en alguna sombra. Y ahora estás haciendo un cambio del diseño y tienes que ir con el Ctrl+F buscando y reemplazando un color por el otro. ¿No sería más fácil si el color estuviera en un sólo sitio y sólo lo tuviéramos que modificar una vez? Pues eso es lo que hacen las variables de LESS, ¿no me dirás que no es mejor?

Un ejemplo te lo mostrará mejor. El típico código CSS sería así


nav { background-color: #ccc;}

.post h3 { color: #ccc; }

footer p { color: #ccc; }

En cambio, con las variables de LESS, este mismo código será así:


@color-gris: #ccc;

nav { background-color: @color-gris;}

.post h3 { color: @color-gris; }

footer p { color: @color-gris; }

Así, se olvidó el buscar y reemplazar por todo el documento, con una sola modificación quedará el color modificado en todo el sitio web.

Mixins o reuso de clases

Según la Wikipedia un mixin es una clase que ofrece cierta funcionalidad para ser heredada por una subclase. En palabras más sencillas, un mixin es una clase que podemos llamar desde otras clases y así reutilizarlas de manera repetida. Si modificamos algo en la clase mixin, quedará modificado en todas las clases que han heredado el mixin.

Los mixins se parecen en algunas cosas a las funciones de los lenguajes de programación. En LESS se utilizan para agrupar código CSS y facilitar así su reutilización. Pongamos un ejemplo. Imagina que queremos utilizar varias veces esquinas redondeadas:


nav {
   border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

//...

.post {
   border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

Para evitar la repetición del código una y otra vez, es mejor crear una clase y reutilizarla:


.esquinas {
   border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;

}

nav {
   .esquinas;
}

.post  {
   .esquinas;
}

Así, cada vez que quedamos utilizar esquinas redondeadas de 5px sólo tendremos que llamar a la clase .esquinas.

Pasar argumentos

Imagínate que además no quieras tener que escribir 5px cada vez, pues en este caso sólo lo has de modificar tres veces, pero en cuanto empieces a utilizar CSS3 serán varias más. Pues LESS te permite hacerlo, pasando un parámetro, al igual que se hace con las funciones de programación.


.esquinas (@radio:5px) {
   border-radius: @radio;
  -moz-border-radius: @radio;
  -webkit-border-radius: @radio;

}

nav {
   .esquinas;
}

.post  {
   .esquinas;
}

Rizando el rizo..

Podemos rizar más el rizo pasando más de un parámetro. Para ello, simplemente separamos los argumentos con una coma:


.miGradiente (@color1:#e3e3e3, @color2:#fff) {

    background: -webkit-linear-gradient(top, @color1, @color2);
   background: -moz-linear-gradient(top, @color1, @color2);
   background: -o-linear-gradient(top, @color1, @color2);
   background: -ms-linear-gradient(top, @color1, @color2);
   background: linear-gradient(top, @color1, @color2);

}

nav {
   .miGradiente;
}

.post  {
   .miGradiente;
   color:#666;
}

Más ejemplos
Veamos otro ejemplo:


.BoxShadow(@x: 0, @y: 0, @blur: 1px, @color: #000) {
  box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  -webkit-box-shadow: @arguments;
}

.container {
   .BoxShadow;
}

El resultado cuando lo compilemos a CSS será:


.container {
  box-shadow: 0 0 1px black;
  -moz-box-shadow: 0 0 1px black;
  -webkit-box-shadow: 0 0 1px black;
}

Rizando el rizo..

Pongamos ahora el caso que para una clase en cuestión queremos cambiar algunos de los valores del mixin actual. Entonces lo que haremos es que cuando llamemos a la clase pondremos los valores que queremos modificar entre paréntesis:


.BoxShadow(@x: 0, @y: 0, @blur: 1px, @color: #000) {
  box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  -webkit-box-shadow: @arguments;
}

.container {
   .BoxShadow(2px, 5px);
}

El CSS resultante cuando compilemos este código LESS será:

.container {
  box-shadow: 2px 5px 1px black;
  -moz-box-shadow: 2px 5px 1px black;
  -webkit-box-shadow: 2px 5px 1px black;
}

Operaciones

Otra cosa que nos permite LESS es realizar operaciones con las variables. Imagínate que tienes un margen y quieres reutilizarlo pero auemtándolo o disminuyéndolo. Con las operaciones de LESS podrás crear un margen base y modificarlo:

@base-margin: 25px;
#header { margin-top: @base-margin + 10px; }

También podemos aprovechar esta propiedad para el color, pues con LESS puedes sumar y restar valores hexadecimales a los colores:


@azul: #00c;
@azul_claro: @azul + #333;
@azul_oscuro: @azul - #333;

Imagen de Smashing Magazine

Heredar propiedades concretas de un mixin

A veces también te vas a encontrar con que no quieres heredar todas las propiedades de un mixin. Podemos crear una clase un id que contenga varias clases


#defaults {

  .borde { border: 1px solid #073;
   }
  .BoxShadow(@x: 0, @y: 0, @blur: 1px, @color: #000) {
    box-shadow: @arguments;
   -moz-box-shadow: @arguments;
   -webkit-box-shadow: @arguments;
   }
}

p {
  #defaults > .BoxShadow;
}

Aquí h1 ha heredado la propiedad BoxShadow de defaults.

Conclusión

Espero que esta guía de LESS te haya permitido hacerte una idea de como funciona un preprocesador de CSS y de cómo nos facilita el trabajo el uso del mismo.


Comentarios

  • Emilio Cobos Álvarez

    Yo me decanto sin ninguna duda por SASS (SCSS más bien). Por dos razones principales:

    SASS al extender combina selectores, lo que lo hace mucho más eficiente. Sin embargo less incluye dos veces las propiedades.

    Finalmente SASS tiene Compass, que hace que lo tengas todo listo desde el principio.

    Pero uses cual uses te estás haciendo un favor al preprocesar CSS. Es muchísimo más eficiente.

    • Emilio Cobos Álvarez

      Son una serie de mixins de ayuda para CSS, que se mantienen actualizados, y son completamente modulares.

      Por ejemplo, para incluir border-radius con LESS, tienes que hacer algo como:

      .border-radius(@radius: 5px){
      -webkit-border-radius: @radius;
      -moz-border-radius: @radius;
      border-radius: @radius;
      }

      .miclase {
      .border-radius(3px);
      }

      con sass + compass;
      .miclase {
      @include border-radius(3px);
      }

      Esto con border-radius no es muy distinto, pero con los gradientes es mucho más fácil, permitiendo incluso soporte con IE9 gracias a SVG.

      Compass además contiene resets (puedes poner al principio de tu hoja de estilos @import "compass/reset" y compilará con el reset al principio (que es más fácil que copiarlo), mixins para sprites, etc…

      • Marcel Valdez

        IE9 no soporta SVG, de qué estás hablando?
        IE9 utiliza VML como lenguaje markup para imágenes vectorizadas, esto lo hace porque es lo que utiliza todo el paquete Office.

        http://en.wikipedia.org/wiki/Vector_Markup_Language

        • Marcel Valdez

          Retiro lo dicho, ya vi que el IE9 empezó a tener soporte para SVG. Mis sufrimientos convirtiendo SVG a VML fueron en vano. :(

  • Juan López

    Muy bueno Sandra, muchas gracias.

  • Jimmy Sáenz

    Excelente artículo, muy claro y elaborado.

    Respecto a la pelea SASS VS LESS, sin bien es cierto que SASS tiene la ventaja por Compass, LESS tiene una buena arma a favor que es Twitter Boostrap, la comparación no se puede realizar en cuánto a caracs. con Compass pero Boostrap es una increíble herramienta. Si bien es cierto que existe un “port”, no va en paridad a la versión oficial.

    Adicionalmente, existe LESS Elements, que a pesar que no se compara en cuánto a funcionalidad con Compass, ya le da unos puntitos a LESS.

    Por último, al igual que Sandra, una de las ventajas que hacen decantarme por LESS es la implementación en Javascript que me ahorra trabajo cuando solo tengo a mi disposición un editor de texto, un navegador y cliente FTP.

    Saludos.

    • Sandra

      Hola Jimmy, muchas gracias por tu excelente aportación al debate entre LESS y SASS. A mí lo que más me gusta de LESS con respecto a SASS es que el código es mucho más limpio y que la curva de aprendizaje es mucho más suave.

      Además de Bootstrap existe también The Semantic Grid System, que funciona tanto con LESS como con SASS y que no introduce ninguna clase en el código HTML. Yo finalmente me he decantado por LESS porque me gusta mucho más su sintaxis. Aún así, entiendo que haya quien prefiera SASS por Compass.

      Un saludo!

  • Carlos

    Personalmente prefiero utilizar Sass con Scout, me evito la fatiga de instalar ruby, http://mhs.github.com/scout-app/ Lo pueden descargar desde aquí, solo basta instalarlo y a programar Sass se ha dicho, una de las ventajas es que está hecho con Air, lo que permite descargarlo en instalarlo en el SO que les plazca, saludos.

  • Mith

    ¡Excelente! Realmente me ha convencido de la utilidad del procesamiento de CSS, que es el objetivo del artículo ^^

  • Alberto

    Me ha gustado mucho el articulo y me ha resultado muy útil y muy bien explicado como siempre ;-)

  • quico

    Hola, gran tuto

    me gustaria si le puedo añadir por ejemplo body>* en…

    html {
    body {
    header {}
    nav {}
    footer {}
    }
    }

    gracias

  • quico

    Esto no funciona

    @fontA: Lucida Calligraphy;
    @FontB: Monotype Corsiva;

    @font-face {
    font-family: ‘@fontA’;
    src: url(‘../font/@fontA.eot’);
    src: url(‘../font/@fontA.eot?#iefix’) format(‘embedded-opentype’),
    url(‘../font/@fontA.woff’) format(‘woff’),
    url(‘../font/@fontA.ttf’) format(‘truetype’),
    url(‘../font/@fontA.svg#Pecita’) format(‘svg’);
    font-width: normal;
    font-style: normal;
    }

  • Luis

    Hola, me gusto tu tutorial, solo me quedo una duda. Por ejemplo si creo mis variables en un archivo .less y despues le doy ctrl+B en mi sublime tengo que hacerle un @import a mi archivo css que me genero mi .less o como es que se cargan los archivos a mi pagina, eso fue lo que no me quedo muy claro, ya que si le doy ctrl+B hay veces que me da error y sino me da error igual el archivo que genera .css me sale en blanco. Espero me haya explicado bien y me puedas ayudar.

    Saludos desde Guatemala, sigo muy seguido tu blog.

    • Sandra

      Hola Luis, cuando das a Ctrl+B se genera la versión css del archivo less en la misma carpeta donde tienes el archivo less, no hay que hacer ningún @import..

  • Javier

    Yo me decantado por less, aún llevo poco tiempo usándolo pero por el poco uso que le di por el momento creo que me va a ahorrar mucho tiempo de trabajo.

    • eSandra

      Hola Javier, pues sí, si has de maquetar mucho con CSS, lo mejor es que aprendas LESS. Si además luego quieres usar un framework, Bootstrap 3 trae LESS integrado, así que te irá de muerte. Un abrazo!

  • marta

    como siempre Sandra , muy clara…ahora bien , estoy compilando less para convertir a css con sublime text-2, instale el plugin de less en sublime, al ejecutar la accion me indica este error:
    [Compile]

    Expected ‘)’ but found ‘ ‘ on line 20 in file ‘less/mixins/image.less’:
    [19]: // spelling of `min–moz-device-pixel-ratio` is intentional.
    [20]: .img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
    ——————–^
    [21]: background-image: url(“@{file-1x}”);
    [Done – Failed]
    [Finished in 2.7s with exit code -5]
    tenes idea que ocurre? gracias, siempre te sigo…

    • eSandra

      Hace tiempo que no uso este plugin, no te sabría decir. Te recomiendo mirar en los foros. Suerte!

  • Mario

    Me ha gustado mucho el articulo !! muy practico todo, empezare a usar Less en mis proyectos