SASS | Interpolation

Interpolation is basically an insertion. Interpolation allows us to interpolate sass expressions into a simple SASS or CSS code. Means, you can define ( some part or the whole ) selector name, property name, CSS at-rules, quoted or unquoted strings etc, as a variable. Interpolation is a new principle and it is widely used in SASS.

To interpolate an expression we need to wrap the expression using #{ }.

Syntax:

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

where ….. represents some text.

See the example below to get more understanding:
SASS file:

@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);
}

Compiled CSS file:

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

Interpolation in SASS expressions always returns an unquoted string, no matter whether the string is quoted or not.

Uses of Interpolation:

1. To use dynamically created names as a property name, a variable name or for any other same purposes.
2. To create a very reusable code; where you can define a property name, strings, selector names etc, as a variable.

My Personal Notes arrow_drop_up

Save