Richard RembertInterpolation is essentially a code insertion. It allows us to interpolate SASS expressions into our code. We can use it to use a selector or property name, quoted or unquoted strings etc, as variables.
The Syntax
To interpolate an expression we need to wrap the expression using #{ }.
#{$variable_name}
Let’s see an example that shows how we could use interpolation with a mixin:
@mixin interpolation($editable, $val, $val2, $prop1, $prop2)
{
background-#{$editable}: $val;
position: $val2;
#{$prop1}: 0px;
#{$prop2}: 0px;
}
.block1{
@include interpolation("image", url("img.png"), absolute, top, right);
}
.block2{
@include interpolation("color", lightgray, absolute, top, left);
}
This will compile in CSS as follows:
.block1 {
background-image: url("img.png");
position: absolute;
top: 0px;
right: 0px;
}
.block2 {
background-color: lightgray;
position: absolute;
top: 0px;
left: 0px;
}
As you can see, it’s quite easy to use this to create dynamically reusable code!
Main Reasons to Use Interpolation
- We can use dynamically created names as a property name, a variable name or for other similar purposes.
- We can create highly reusable code!
In the next article, we’ll learn how to use placeholders in SASS.
Conclusion
If you liked this blog post, follow me on Twitter where I post daily about Tech related things!
If you enjoyed this article & would like to leave a tip — click here
