Sass Interpolation

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;
    #{$top-or-bottom}: 0;
    #{$left-or-right}: 0;
  }
}

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

note

Interpolation is useful for injecting values into strings, but other than that it’s rarely necessary in SassScript expressions. You definitely don’t need it to just use a variable in a property value. Instead of writing color: #{$accent}, you can just write color: $accent!