YogeshChauhan . com

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

dreamhost

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 uninstall Cocoapods from the Mac OS? #4 How to add Read More Read Less Button using JavaScript? #5 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

May 5 Use inline if to make a shorter conditional syntax in React May 4 What is Conditional Rendering in React? May 3 How does @extend rule work in SCSS (Sass)? May 2 How different is Handling Events in React vs HTML DOM? May 2 How to create bouncing balls using HTML canvas and JavaScript? Apr 30 HTML canvas methods

You might also like these

What is a “promise” in JavaScript?JavaScriptHow to add new elements with swing animation using JavaScript and CSS?CSSAdvanced Array Methods in JavaScript (with examples)JavaScriptClasses in JavaScript: The BasicsJavaScriptCREATE TABLE Examples in PostgreSQLPostgresHow to convert a number rounding to a specified number of decimals in JavaScript?JavaScript