Interpolación

<< Variables Mixin >>

El último punto que veremos dentro del apartado de variables es la interpolación. Podemos usar el método “Ruby-esque” usando una almohadilla seguida de una apertura y cierre de llaves para añadir nuestras variables a selectores, nombres, propiedades o string.

$side: top;
sup{
    position: relative;
    #{$side}: -0.5em;
}

Si añadimos esa interpolación como un selector, tenemos:

$side: top;
sup{
    position: relative;
    #{$side}: -0.5em;
}
.callout-#{$side}{
    background: #777;
}

Es bastante útil el considerar el nombre de nuestras variables como hemos hecho con .callout-top. Si usamos cosas que son más semánticas como $color-base conseguimos que tenga un mayor uso antes que si lo nombramos como $color-blue, principalmente si trabajamos con diferentes proyectos.

<< Variables Mixin >>