SASS | Interpolación

La interpolación es básicamente una inserción. La interpolación nos permite interpolar expresiones sass en un código SASS o CSS simple. Significa que puede definir (alguna parte o la totalidad) el nombre del selector, el nombre de la propiedad, las reglas CSS, las strings entre comillas o sin comillas, etc., como una variable. La interpolación es un principio nuevo y se usa ampliamente en SASS.

Para interpolar una expresión necesitamos envolver la expresión usando #{ }.

Sintaxis:

......#{$variable_name}........

donde ….. representa algún texto.

Consulte el siguiente ejemplo para comprender mejor:
Archivo SASS:

@mixin interpolation($changeable, $val, $val2, $prop1, $prop2)
{
    background-#{$changeable}: $val;
    position: $val2;
    #{$prop1}: 0px; 
    #{$prop2}: 0px;
}


.blockarea{
    @include interpolation("image", url("img.png"), absolute, top, right);
}

.anotherbloakarea{
    @include interpolation("color", lightgray, absolute, top, left);
}

Archivo CSS compilado:

.blockarea {
    background-image: url("img.png");
    position: absolute;
    top: 0px;
    right: 0px;
}
  
.anotherbloakarea {
   background-color: lightgray;
   position: absolute;
   top: 0px;
   left: 0px;
}

La interpolación en expresiones SASS siempre devuelve una string sin comillas, sin importar si la string está entre comillas o no.

Usos de la interpolación:

1. Para utilizar nombres creados dinámicamente como nombre de propiedad, nombre de variable o para cualquier otro propósito.
2. Para crear un código muy reutilizable; donde puede definir un nombre de propiedad, strings, nombres de selector, etc., como una variable.