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:
-
To use dynamically created names as a property name, a variable name or for any other same purposes.
-
To create a very reusable code; where you can define a property name, strings, selector names etc, as a variable.
Last Updated :
11 Oct, 2019
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...