Signup/Sign In

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.


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.

About the author:
I like writing content about C/C++, DBMS, Java, Docker, general How-tos, Linux, PHP, Java, Go lang, Cloud, and Web development. I have 10 years of diverse experience in software development. Founder @ Studytonight