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

I am doing BTech at Dhirubhai Ambani Institute of Information and Communication Technology

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.