Sass Interpolation – A Comprehensive Explanation

In our last post, we went over Sass variables, variable scope and ends with global and default flags. We had promised our next post is going to be Sass interpolation, hence in this post we are going to discuss Sass interpolation.

So you play with Sass from time to time. You are starting to enjoy it since it caters to most of your needs. But there’s this one thing you don’t completely understand: Interpolation.

Well you are in luck, because today we are going to shed some light on the matter of Sass interpolation and its best use cases.

What is Sass interpolation?

Sass interpolation is a technique to include the result of any Sass expression into the stylesheet wherever required. This can be used to define any style rule property, dynamic variable names, dynamic function names, etc in your Sass style code.

Sass interpolation is a technique to include the result of any Sass expression into the stylesheet wherever required.

To interpolate an expression we need to wrap the expression using #{}.

Syntax:

/* anything inside #{} will be evaluated */
......#{$variable-name}........ 

where … represents some text and $variable-name is the name of the variable or property name.

See the example below to get more understanding:

$name: 'Sunil';
.foo {
content: 'Hello ' + $name + '!'; // Hello Sunil!
}

.foo {
  content: "Hello Sunil!";
}

Though, you might consider here string concatenation is highly verbose. Thanks to variable interpolation, we can actually have a string containing variable(s) without having to concatenate several string chunks:

$name: 'Sunil';
.foo {
content: 'Hello #{$name}!';  // Hello Sunil!
}

.foo {
  content: "Hello Sunil!";
}

Roughly speaking by wrapping a variable identifier with #{}, it tells Sass to treat the content of the variable as plain CSS.

An interpolation, coming from the Latin meaning “to polish between”, is simply an insertion to a string.

Anyway, this is how variable interpolation (variable substitution) works in Sass. Whether you use concatenation or interpolation is really up to you at this point, but let’s just say that interpolation is syntactic sugar for string concatenation.

Where should you use Sass interpolation?

Now that you are aware of what variable interpolation or variable substitution is and how to do it in Sass, it’s time to move on to actual use cases of Sass interpolation.

Let’s begin with interpolation in string;

How to use Sass interpolation in string type

String interpolation will render the result of a Sass expression as compiled CSS. In this basic example, we are setting color variables, then rendering them out as CSS comments.

$brand-red: #f94f4f;
$brand-dark-grey: #3a3a3a;
$brand-light-grey: #c1c1c1;

/**

Brand X Color Reference 

Red is: #{$brand-red}
Dark Grey is: #{$brand-dark-grey}
Dark Grey is: #{$brand-light-grey}

**/

Notice how we use string interpolation directly in the comment.

/**

Brand X Color Reference 

Red is: #f94f4f
Dark Grey is: #3a3a3a
Dark Grey is: #c1c1c1

**/

How to use Sass interpolation in CSS functions

So far, we have seen the most common use case for variable interpolation: printing the content of a variable in a string.

That’s a great example, but from our point of view, there is an even better use case for this: variables in CSS functions, for instance calc().

The calc() function performs a calculation to be used as the property value.

Let’s say you want to size your main container based on the width of the sidebar. So you have stored the width in a variable:

$sidebar-width: 250px;

.main {
  width: calc(100% - $sidebar-width);
}

And then surprise! It doesn’t work. There’s no Sass error, but your container isn’t sized properly.

Now let’s think about it: calc() is a CSS function, not a Sass function. This means that Sass interprets the whole expression as a string.

.main {
  width: calc(100% - $sidebar-width);
}

Because it is a string, there is no reason for Sass to behave any differently hence, $sidebar-width is considered to be a regular string, so gets printed as is. But that’s not what you want, right? So let’s interpolate it!

$sidebar-width: 250px;

.main {
  width: calc(100% - #{$sidebar-width});
}

Now, when Sass compiles the stylesheet, it will replace #{$sidebar-width} with the value associated to $sidebar-width, in this case 250px, resulting in the following valid CSS:

.main {
  width: calc(100% - 250px);
}

We talked about calc() function from CSS only here but it’s the same thing with url(), linear-gradient(),radial-gradient(), cubic-bezier() and any other CSS native functions, including all the pseudo-classes.

How to use Sass interpolation in CSS directives (at-rule)

Media queries are another use case where you will have to deal with variable interpolation. To be concise, Sass will only evaluate Sass variables in a media query if they are within a pair of parentheses.

So when dynamically creating media blocks, you need to wrap the whole thing in parentheses. This is perfectly fine for complex media queries such as (min-width: 1337px), but it might cause an issue for media keywords such as screen:

$media: screen;
$feature: min-width;
$value: 1337px;

@media ($media) and ($feature: $value) {
  // …
}

Sass compiled the snippet as:

@media (screen) and (min-width: 1337px) {}

Yet this is invalid CSS because of (screen). The media keyword should not be wrapped in parentheses. In order to make Sass evaluate the variable, we have no choice but to interpolate it:

$media: screen;
$feature: min-width;
$value: 1337px;

@media #{$media} and ($feature: $value) {
  // …
}

Sass compiled the snippet as:

@media screen and (min-width: 1337px) {}

How to use Sass interpolation in CSS selector

One of the interpolation use cases could be to make CSS selector rules more dynamic. Suppose, when using a variable as a selector, or as part of a selector as the following example:

$section: 'home';
.section-$section {
background: transparent;
}

Unfortunately, it is not going to work and throw an error:

This is pretty much for the same reasons as for the media query example. Sass has its own way of parsing a CSS selector. If it encounters something unexpected, for instance an un-escaped dollar sign, then it crashes.

Interpolation in Sass expressions always returns an unquoted string, no matter whether the string is quoted or not.

Fortunately, solving this issue is simple, for this we need to interpolate the variable.

$section: 'home';
.section-#{$section} {
  background: transparent;
}

.section-home {
  background: transparent;
}

Conclusion

As we said earlier, what makes Sass great is the combined force of its features. This is definitely true in the case of interpolation.

Interpolation is supported in any part of a Sass stylesheet, and can be used in conjunction with functions and variables. You can use interpolation to dynamically refer to properties, class names, values, elements, and more.

Hence we can use this technique to make our stylesheet more dynamic and use the power of Sass to write less code which evaluates into more CSS code.

Anyway we hope, we have helped you to understand how interpolation works in Sass. If you have anything to add, be sure to share in the comments.

Similar articles you may like

• Sass Mixins – A Quick Intro
• Sass Variables – A Quick Intro
• Essential Git commands : Basic to advance with examples
• Getting started with Git and GitHub: the complete beginner’s guide