Learn
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; 
}
Community Forums
Get help and ask questions in the Codecademy Forums
Report a Bug
If you see a bug or any other issue with this page, please report it here.