What is Interpolation in Sass and when would you use it?

Experience Level: Junior
Tags: Sass

Answer

Interpolation can be used to embed the result of Sass expression into a CSS.

Interpolation is often used to generate selector names that are partially defined by a parameter. Another use case can be injecting icon names into URLs based on parameter values.

Sass

@mixin button($selector, $bgColor) {
  .button-#{$selector} {
     background-color: $bgColor;
     color: white;
     border: none;
  }
}

@include button("primary", blue);
@include button("secondary", navy);
@include button("error", red);

CSS

.button-primary {
  background-color: blue;
  color: white;
  border: none;
}

.button-secondary {
  background-color: navy;
  color: white;
  border: none;
}

.button-error {
  background-color: red;
  color: white;
  border: none;
}

Comments

No Comments Yet.
Be the first to tell us what you think.
Sass for beginners
Sass for beginners

Are you learning Sass ? Try our test we designed to help you progress faster.

Test yourself