New Tutorials:   JAVASCRIPT    SASS/SCSS    PL/SQL  
See the Tutorial List

SASS Interpolation

SASS Interpolation is a technique to include the result of any SASS Script expression into the stylesheet wherever required. 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 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.