SASS Interpolation - Using #{}

SASS Interpolation is a technique to include the result of any SASS Script expression into the stylesheet wherever required using #{}. This can be used to define any style rule property, dynamic variable names, dynamic function names, etc in your SCSS style code.

SASS Interpolation: Syntax

To include an expression's result or variable's value in your stylesheet we use the interpolation technique,

/* syntax for interpolation */
#{}
/* anything inside will be evaluated */

SASS Interpolation: Example

Let's take a few examples to see its usage.

@mixin corner-icon($name) {
  /* using interpolation */
  .icon-#{$name} {
    background-image: url("/icons/#{$name}.svg");
  }
}

/* calling the above mixin */
@include corner-icon("mail");

This will be compiled into the following CSS code,

.icon-mail {
  background-image: url("/icons/mail.svg");
}

As we can see in the above example, the value of the $name variable is added wherever we used #{$name} in our stylesheet.

Don't worry about mixins and include at-rule, we will cover them in the upcoming tutorials.

Conclusion:

We can use this technique to make our stylesheet more dynamic and use the power of SASS/SCSS to write less code which evaluates into more CSS code.