Code Editor
Web Browser
Mixins and the & Selector

String Interpolation

In Sass, string interpolation is the process of placing a variable string in the middle of two other strings.

In a mixin context, interpolation is handy when you want to make use of variables in selectors or file names. The notation is as follows:

@mixin photo-content($file) { content: url(#{$file}.jpg); //string interpolation object-fit: cover; } //.... .photo { @include photo-content('titanosaur'); width: 60%; margin: 0px auto; }

String interpolation would enable the following CSS:

.photo { content: url(titanosaur.jpg); width: 60%; margin: 0px auto; }
Report a Bug
If you see a bug or any other issue with this page, please report it here.