Sass Interpolation

Last Updated:

Sass Interpolation

Interpolation is used to embed the result of a SassScript expression into a chunk of CSS by wrapping an expression in #{}.

Example

SASS TO CSS CONVERTER
@mixin icon($name) { .icon-#{$name} { background-image: url("/icons/#{$name}.svg"); } } @include icon("bicycle"); @include icon("bike");

Syntax

#{expression}

Sass Interpolation with Dynamic CSS Property

Interpolation can be used to create a dynamic CSS property.

Example

SASS TO CSS CONVERTER
@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("cycle", bottom, right);

Share this Page

Meet the Author