Is .#{$pretty--class-name} a sass interpolation method?

I found a nice page for displaying switches (checkboxes, radio, slider etc.). It's been a while since I coded html/sass and I'm a bit baffeled over this bit .#{$pretty--class-name}.

I thought you either used dot or hash. But here you use both. Is this a SASS specific thing where it replaces #{$pretty--class-name} with a variable name?

I found this bit in the SASS documentation:

Users occasionally want to use interpolation to define a variable name based on another variable. Sass doesn’t allow this, because it makes it much harder to tell at a glance which variables are defined where. What you can do, though, is define a map from names to values that you can then access using variables.

But below example is not using the same method.

$pretty--class-name: pretty !default;

.#{$pretty--class-name} {
  position: relative;
  display: inline-block;
  margin-right: 1em;
  white-space: nowrap;
  line-height: 1;
}

Solution

The documentation you mentioned refers only to create variables on fly based on another variables and this is not possible in SASS: you have to use a map to do something similar. In your case, there is only an interpolation method to create a class, not another SASS variable.

So .#{$pretty--class-name} is an example of SASS interpolation syntax that generates .pretty class.

P.S. By the way, that page is really nice. Thanks for sharing it!