Yogesh Chauhan's Blog

What’s Interpolation in SCSS (Sass)?

in SCSS on April 23, 2021

Interpolation is nothing but an expression wrapped in #{}.

You can use it anywhere in your SCSS stylesheet. You need that to embed the result of a SassScript expression.

What’s SassScript expression?

SassScript expression is the the part on the right side of a variable or property declaration.

For e.g.

$sizes: 40px; //with unit
$sizes: 40; //without unit
$allowed: true;

Those are some simple examples. It can get very complex and powerful.

Each SassScript expression produces a value on compilation. You can also use valid CSS property value (like 40px in the example above) as a SassScript expression.

When you pass the SassScript expression as arguments in mixin or functions, it can produce some amazing results with fewer lines of code. You can also use @if rule to manipulate it.

Where can you use Interpolation?

Since it’s just like a variable declaration, so you can use it like the following examples:

Interpolation in style rules

@mixin define-emoji($name, $glyph) {
  span.emoji-#{$name} {
    font-family: IconFont;
    font-variant: normal;
    font-weight: normal;
    content: $glyph;

@include define-emoji("women-holding-hands", "👭");

After compilation, this is what we get in CSS:

@charset "UTF-8";
span.emoji-women-holding-hands {
  font-family: IconFont;
  font-variant: normal;
  font-weight: normal;
  content: "👭";

Interpolation in Property Declarations

@mixin prefix($property, $value, $prefixes) {
  @each $prefix in $prefixes {
    -#{$prefix}-#{$property}: $value;
  #{$property}: $value;

.gray {
  @include prefix(filter, grayscale(50%), moz webkit);

After compilation, this is what we get in CSS:

.gray {
  -moz-filter: grayscale(50%);
  -webkit-filter: grayscale(50%);
  filter: grayscale(50%);

Where else can you use interpolation?

You can use it wherever you like. For e.g use it in comments or in property values or in at-rules or with @extends or @imports. You can also use it with strings(quoted or unquoted), in special functions or just in a simple functions.

Do I HAVE to use interpolation?


Interpolation can mostly be used in injecting values into strings other than that you can live without it!

For e.g. you don’t need interpolation to declare a property with a variable value. Like this:

color: #{$accent} // interpolation  not required
color: $accent // this will work fine

DO NOT use interpolation with numbers

You MUST not use interpolation with numbers since it returns the value as a string.

If you use a interpolation with numbers then the math won’t work since you’ll be using strings.

For math operations, use unit arithmetic instead.

For e.g. instead of this:

width: #{$width}px;

Use this:

width: $width * 1px;

You can always define the variable with the unit. That’s the best solution suggested by Sass.

Interpolation will remove quotes around strings

Till now, we understood that interpolation injects the same exact value. Nah! It has one exception. It will remove the quotes around the string. Like this:

.example {
  unquoted: #{"string"};

This CSS code we get after compilation:

.example {
  unquoted: string;

Quotes will be removed no matter how you pass the string, direct string or via lists. No quotes! Sass (SCSS) doesn’t believe in motivation, does it?

Sass explains their move by stating that it allows us to write strings with quotes that can contain a syntax which is actually not allowed in SassScript! That way it uses interpolation to interpolate them into valid style rules.

Use string.unquote() function instead of interpolation to remove the quotes.

For e.g. DO NOT do this:

.example {
  unquoted: #{"string"};

Instead DO this:

.example {
  unquoted: string.unquote($string);

Source: Sass Docs

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
An Example of Cross-site Scripting (XSS) Attack in PHP and How to Avoid It?PHPHow to host Google fonts on your server and add them using CSS?CSSOpen Source Security Tools for Defense SecurityMiscellaneousSome interesting HTML Input Attributes to rememberHTMLHow to make a curtain slider using jQuery and CSS?CSSHow to insert Bootstrap 4 in Angular 9 app?Angular