What does .# mean in SCSS?

Question

I have an example code with .#

.#{$item} {
    background: $item;
  }

I can't find anything on google apart from another example

$fa-css-prefix: fa;
.#{$fa-css-prefix} { ... }

What does it mean?

Answer 1

There are two parts in this expression, The . is the css class selector, #{} interpolation syntax it allows the using of the variables in selectors and property names

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

the generated css:

p.foo {
  border-color: blue; }

Answer 2

The . Is actually for a classname and not related to the #. #{$name} is to output a variable name in escaped format. I case the variable had characters such as dash sass won't treat it as a subtract.

Here's an example: Using SASS, How can I escape the slash character in a font declaration?