Sass Vs Less

Con este post voy a comenzar una serie de entradas dedicadas a una comparativa entre Sass y Less, estos lenguajes de pre-procesamiento de Css que tan útiles resultan en estos días. Actualmente tengo la suerte de trabajar a diario con los dos. En mi curro oficial uso Less debido a que usamos Bootstrap y como conocéis esta realizado sobre este lenguaje. En casa y en trabajos como freelance uso Sass, precisamente este portfolio/blog esta realizado sobre Sass. No quiero entrar en detalles de cual es mejor, si uno u otro, eso se lo voy a dejar a vuestro criterio, solamente voy a poner ejemplos prácticos que me he ido encontrando a lo largo del tiempo entre ambos lenguajes.

Nada mejor para empezar que un ejemplo de estructuras de control. Os expongo el modelo:

4 div a los cuales tenía que agregarles imagenes de fondo distintas, esas conocidas especificaciones de diseño que tanto nos obligan a pensar. Lo primero que hice fue crear las 4 imagenes siguiendo esta secuencia:

• info-1.png
• info-2.png
• info-3.png
• info-4.png

La solución a maquetar fue la siguiente:

Con SASS:

@for $i from 1 through 4 {
    .info-#{$i} {
        background-image:               url('/images/info-#{$i}.png');
    }
}

Con LESS:

@iterations: 4;
.loop (@i) when (@i > 0) {
    .info-@{i} {
        background-image:               url('/images/info-@{i}.png');
    }
    .loop(@i - 1);
}
.loop (0){}
.loop (@iterations);

Como podrán observar es muy simple en ambos casos, cree una variable ($i) que representa la cantidad de elementos a repetir en este caso las 4 imagenes. Sass define en la primera línea de 1 a 4 y crea el correspondiente css sustituyendo la variable $i por el número en la imagen de fondo. Less hace algo parecido pero define el número en otra variable (@iterations) y va restando hasta que llega a 0 y para la ejecución.

En ambos casos es muy simple y como dije anteriormente dejo a su decisión cual resulta más eficiente y rápida.

LESS, SASS \\ Bootstrap, CSS, LESS, SASS \\ No hay comentarios