Sass interpolation evaluates an expression and inserts its result into generated CSS text. Write the expression as #{$variable}; Sass replaces the hash and braces with the value. section 12.3.2
Constructing a property name
A variable can supply part of a declaration: `margin-#{$side}: 0;`. When `$side` is `left`, Sass compiles this to `margin-left: 0;`. Interpolation also creates selectors and generated content, as in `.#{$type}` and `content: "#{$type}: ";`. section 12.3.2 section 12.5
Listing 12.22 Adding to the loop (SCSS)
.callout {
border: solid 1px;
border-radius: 4px;
padding: .5rem 1rem;
}
$callouts: (success: $success, warning: $warning, error: $error);
@each $type, $color in $callouts {
@debug $type, $color;
.#{$type} { #1
@extend .callout;
border-color: $color;
&::before {
content: "#{$type}: "; #2
text-transform: capitalize;
}
}
}
Inspect the complete @each loop to see interpolation create a class selector and readable pseudo-element label for each callout type. section 12.5
Interpolation is especially useful when looping through Sass maps: each key can become a class name and its label can become visible text. This supports multiple generated rules while keeping the source concise. section 12.5
