Sass Interpolation | Tutorial Reference

How to use Sass interpolation with #{} to dynamically embed SassScript expressions in selectors, property names, values, and more for flexible CSS generation.

Interpolation can be used almost anywhere in a Sass stylesheet to embed the result of a SassScript expression into a chunk of CSS.

Just wrap an expression in #{} in any of the following places:

Selectors in style rules
Property names in declarations
Custom property values
CSS at-rules
@extends
Plain CSS @imports
Quoted or unquoted strings
Special functions
Plain CSS function names
Loud comments

Example:

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

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