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?

No.

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 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #4 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
Check if mixin is being called in a style rule or not in SCSSSCSSHow to hide a DIV on clicks outside of it using jQuery?jQueryHow to create a smooth scrolling effect with CSS?CSS:in-range and :out-of-range selector in CSSCSSHow to create two segues with two UIButtons on a single page (Swift 5.0)?SwiftHow can one check to see if a remote file exists using PHP?PHP