Sass Interpolation (#{})

Interpolation, written as #{}, injects a Sass expression's value directly into a selector, a string, a property name, or nearly anywhere else in a stylesheet. This lesson covers where interpolation is needed and where it's optional.

What Is Sass Interpolation?

Interpolation converts a Sass value into a plain string and inserts it at that exact point in your code. It's required anywhere Sass wouldn't otherwise recognize a variable, most commonly inside selector names, property names, and plain strings.

$name: primary;

.btn-#{$name} {
  color: blue;
}

Without #{}, Sass would try to parse .btn-$name literally instead of substituting the variable's value, interpolation is what makes dynamic class names possible.

Interpolation Syntax

.class-#{$variable} { ... }
#{$property}: value;
"text #{$variable} more text"

#{} works inside selectors, letting you build dynamic class or ID names.
#{} works as an entire property name too, useful for generating vendor-prefixed or directional properties.
#{} works inside strings, for building dynamic text, URLs, or content values.
Interpolation is not needed for ordinary declaration values, color: $primary; works fine without #{}.

Interpolation Cheatsheet

Where interpolation is required vs merely optional.

Location	Interpolation Needed?	Example
Selector name	Yes	`.icon-#{$name}`
Property name	Yes	`#{$side}-color: red;`
Plain declaration value	No	`color: $primary;`
Inside a string	Yes	`"Build #{$version}"`
Media query feature	Sometimes	`(min-width: #{$bp})`
`@media` shorthand	No, if using a variable directly	`@media (min-width: $bp)`

Dynamic Class and ID Names

The most common use of interpolation is generating a series of related class names from a loop, exactly the pattern you saw throughout the control rules lessons.

$sizes: sm, md, lg;

@each $size in $sizes {
  .badge-#{$size} {
    padding: 0.25rem 0.5rem;
  }
}

Dynamic Property Names

Interpolation can build an entire property name, not just a selector, useful for generating directional variants (top/right/bottom/left) from a single mixin.

@mixin spacing($direction, $value) {
  margin-#{$direction}: $value;
}

.box {
  @include spacing(top, 1rem);
}

Interpolation in Strings and URLs

Interpolation inside a quoted or unquoted string is useful for building dynamic content values, url() paths, or @debug/comment output that includes a computed value.

$icon-name: "arrow-right";

.icon {
  background-image: url("/icons/#{$icon-name}.svg");
}

.tooltip::before {
  content: "Step #{$step-number}";
}

Common Mistakes

Adding unnecessary interpolation around a plain declaration value, like color: #{$primary};, when color: $primary; already works.
Forgetting interpolation when trying to build a dynamic selector or property name, causing Sass to treat the variable name literally instead of substituting its value.
Interpolating a value that isn't actually a string-friendly type, producing unexpected output like a full map or list dumped into a selector.
Overusing interpolation for readability's sake when a simpler variable reference would already work fine.

Key Takeaways

Interpolation (#{}) converts a Sass value into text and inserts it at that location.
It's required in selectors, property names, and strings whenever you need a dynamic value.
It's unnecessary for plain declaration values, where a bare variable reference already works.
Combining interpolation with @each or @for is the standard way to generate families of related class names.

Pro Tip

As a rule of thumb: if Sass would otherwise treat your variable as literal text (inside a selector, property name, or string), you need #{}; if it's already an expected value position (like after a colon in a declaration), you don't.