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

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;
}