Interpolation exists in many languages such as PHP, JavaScript (known as template literals) and Ruby but here’s how I use it with Sass, with a few quick examples to boot.

What Is Interpolation? #

Put simply, interpolation is the insertion of something of a different nature into something else. Linking this back to Sass, one of the most common uses I have for this is when I want to reference a Sass variable within a css calc() function.

The act of interpolating itself is basically where a string or expression (that may contain one or more variables) is evaluated and the corresponding result is that the variables are replaced with their assigned value. Taking the calc() function as an example, this means that if we had a variable for a header height we can insert this variable into the CSS calc() function and only have to update this in one place.

A Quick Example #

So if you’ve never used interpolation in Sass, specifically a calc() function in this case, you may think it would be as simple as adding the following:

$header_height: 80px;

.hero {
  min-height: calc(100vh - $header_height);
}

However, this will error. As Sass uses Ruby under the hood, and expression substitution in strings, the correct way to write this is to interrogate and therefore use #{$header_height}.

$header_height: 80px;

.hero {
  min-height: calc(100vh - #{$header_height});
}

---

• Next: Animated Add To Cart Button
• Previous: Gatsby and WordPress