What is "interpolation" in SCSS?

Frontend ToolsJunior~1 min read

Interpolation in SCSS is a mechanism for substituting the value of a variable (or expression) inside a string, selector or property name using the #{$variable} syntax. It is used in situations where simply using a variable is not possible or would break the syntax.

What interpolation is for

Creating dynamic selectors

scss

$size: large;

.btn-#{$size} {
  font-size: 20px;
}

Result:

css

.btn-large {
  font-size: 20px;
}

Forming property names

scss

$prop: border;

.box {
  #{$prop}-radius: 10px;
}

Result:

css

.box {
  border-radius: 10px;
}

Inserting variables inside strings

scss

$img: "header";

.block {
  background: url("img/#{$img}.png");
}

Result:

css

.block {
  background: url("img/header.png");
}

In essence: interpolation lets you dynamically build CSS code in places where a variable needs to become part of a string, name or selector, not just a property value. It adds flexibility, especially when generating classes, properties or themes of the same type.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.

What is "interpolation" in SCSS?

#What interpolation is for

Short Answer

What interpolation is for