Sass Interpolation

What You’ll Learn

Sass interpolation embeds a SassScript expression into CSS with #{ }. This page covers where it works, when you should skip it, quoted-string quirks, safe number handling, and five compiled examples.

What Is Sass Interpolation?

Official docs: wrap an expression in #{ } to inject its result into a chunk of CSS. Think of it as “paste this computed text here”—into a class name, a property name, a URL path, a keyframes name, or a loud comment.

• Evaluates at compile time—the CSS file contains only the final text.
• In SassScript, interpolation always produces an unquoted string.
• Quoted strings lose their quotes when interpolated (even inside lists).
• Rarely needed for plain property values—use the variable directly.

📝 Syntax

@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);

🎯 Where You Can Use #{ }

Official docs list these locations:

• Selectors in style rules
• Property names in declarations
• Custom property values
• CSS at-rules (for example @media, @keyframes)
• @extend targets
• Plain CSS @imports
• Quoted or unquoted strings
• Special functions and plain CSS function names
• Loud comments

⚠️ When Not to Interpolate

Official fun fact: other than injecting into strings, interpolation is rarely necessary in SassScript. You do not need it to use a variable as a property value.

🧮 SassScript & Quoted Strings

Inside SassScript, interpolation injects text into unquoted strings—handy for dynamic animation names or slash-separated values. The result is always an unquoted string.

One special case: quotation marks around quoted strings are removed when interpolated. That lets you store selector-like text in a quoted string and inject it into a rule. When you only want to unquote, prefer string.unquote().

Examples Gallery

Each example shows a core interpolation pattern. Open View Compiled CSS for verified output.

@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;
}

$side: left;
$prop: border-#{$side}-color;
$theme: dark;

.card-#{$theme} {
  #{$prop}: #036;
  --accent-#{$theme}: #c6538c;
}

.card-dark {
  border-left-color: #036;
  --accent-dark: #c6538c;
}

@use "sass:string";

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

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

@mixin pulse($name, $duration) {
  @keyframes #{$name} {
    from { opacity: 0.4; }
    to { opacity: 1; }
  }

  .pulse {
    animation-name: $name;
    animation-duration: $duration;
  }
}

@include pulse(fade-in, 1.5s);

@keyframes fade-in {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}
.pulse {
  animation-name: fade-in;
  animation-duration: 1.5s;
}

$bp: 768px;

@media (min-width: #{$bp}) {
  .sidebar {
    display: block;
  }
}

/* Built at #{"compile"} time: #{1 + 1} */
.note {
  content: "ok";
}

@media (min-width: 768px) {
  .sidebar {
    display: block;
  }
}
/* Built at compile time: 2 */
.note {
  content: "ok";
}

🚀 Real-World Use Cases

• BEM / theme classes — .btn-#{$variant}.
• Directional properties — #{$side}-margin helpers.
• Asset URLs — url("/icons/#{$name}.svg").
• Generated motion — unique or parameterized @keyframes names.
• Build banners — version or math inside loud comments.

⚠️ Common Pitfalls

• color: #{$accent} — unnecessary; use $accent.
• #{$n}px — stringifies numbers; prefer $n * 1px.
• Trying to build $theme-#{$name} variables — illegal; use a map.
• Using #{ } only to unquote — call string.unquote instead.
• Expecting runtime changes — interpolation is compile-time only.

💡 Best Practices