dots Created with Sketch.
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

amazon

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

#Jul 22 Is there a CSS parent selector? #Jul 22 Difference between :where and :is in CSS #Jul 22 Does :is() pseudo selector hint at CSS preprocessing in the future? #Jul 22 Control Scrolling with CSS Scroll Snap #Jul 21 Control rendering using CSS content-visibility property #Jul 21 How to use @supports rule in CSS?
You might also like these
Does :is() pseudo selector hint at CSS preprocessing in the future?CSSSolution to “Call to undefined function mysql_error()” in RevSlider WordPress PluginWordPressWordPress: How to get ACF field values from another post?WordPressHow to create a dynamic countdown using HTML and JavaScript?HTMLHow to hide a DIV on clicks outside of it using jQuery?jQueryHow to define variables in SCSS (Sass)?SCSS