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

Chat

Oh, the operator is not available. Leave us your comments. We will answer all your questions as soon as possible.

Comments

Anonymous
Καλησπέρα.
Anonymous
the infinteis -3/15 so 1triition / infinet
Anonymous
e
Anonymous
<a href="https://inspirum.pl "
Anonymous
[url]https://inspirum.pl[/url]
LaceJaguar65
e
LaceJaguar65
e
LaceJaguar65
e
LaceJaguar65
e
LaceJaguar65
e
LaceJaguar65
e
LaceJaguar65
e
LaceJaguar65
e
LaceJaguar65
e
LaceJaguar65
e
LaceJaguar65
e
LaceJaguar65
e
LaceJaguar65
e
LaceJaguar65
e
LaceJaguar65
e
LaceJaguar65
e
LaceJaguar65
e
LaceJaguar65
e
LaceJaguar65
e
LaceJaguar65
e