Sass Interpolation

Definition and Usage

Interpolation embeds a SassScript expression into a chunk of CSS. Wrap the expression in #{ } inside selectors, property names, URLs, custom properties, strings, and more.

Syntax

// Inject into CSS text:
.icon-#{$name} { ... }
#{$side}: 0;
url("/icons/#{$name}.svg");
--brand: #{$accent};

// Ordinary property values — no interpolation needed:
color: $accent;

// In SassScript, #{ } always returns an unquoted string:
$name: inline-#{unique-id()};

Pattern: build a CSS identifier / string / at-rule fragment → wrap the dynamic part in #{ } → compile to plain CSS.

Where It Works

Places you can use #{ }:

Related Topics

Previous: Sass comments. Next: Sass syntax. Also: variables, string.unquote(), string.unique-id().

SCSS Examples

Open View Compiled CSS for verified Dart Sass output (matches official Sass docs samples where shown).

@mixin corner-icon($name, $top-or-bottom, $left-or-right) {
  .icon-#{$name} {
    background-image: url("/icons/#{$name}.svg");
    position: absolute;
    #{$top-or-bottom}: 0;
    #{$left-or-right}: 0;
  }
}

@include corner-icon("mail", top, left);

.icon-mail {
  background-image: url("/icons/mail.svg");
  position: absolute;
  top: 0;
  left: 0;
}

$mod: primary;

.btn-#{$mod} {
  border-color: currentColor;
}

.btn-primary {
  border-color: currentColor;
}

$accent: #336699;

:root {
  --brand: #{$accent};
}

:root {
  --brand: #336699;
}

@use "sass:string";

.example {
  unquoted: #{"string"};
  clearer: string.unquote("string");
}

.example {
  unquoted: string;
  clearer: string;
}

$width: 10;

.bad {
  width: #{$width}px;
}

.good {
  width: $width * 1px;
}

.bad {
  width: 10px;
}

.good {
  width: 10px;
}

Sass Support

Interpolation is core Sass syntax on Dart Sass.

Compile with the Dart Sass CLI.

Key Takeaways

Compile Notes

Practical checklist:

1. Need a dynamic selector / property name / URL? Use #{ }
2. Need a normal property value? Use $var directly
3. Need a custom property value? Use #{$var}
4. Need units? Prefer math ($n * 1px), not #{$n}px
5. Need only to unquote? Prefer string.unquote()