What does sharp (#) (e.g. #{$variable}) mean in SCSS?

Question

I was checking out an article and came across something like the following:

$desktop-width: 1024px;

@mixin desktop {
  @media(min-width: #{$desktop-width}) {
    ...
  }
}

And was wondering why the use of sharp (#)? Can't you just do min-width: $desktop-width ?

Thank you in advance and will accept answer/up vote

Answer 1

#{}负责字符串插值，因此在上面的示例中不需要它，可以省略。

Answer 2

#{} is used for string interpolation: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#interpolation_

There is one exception to this, though: when using #{} interpolation, quoted strings are unquoted. This makes it easier to use eg selector names in mixins. For example.

So this technique is used sometimes to allow using sass values in selectors. Eg:

$gutter: 10;

.grid#{$gutter} {
    background: red;
}

Now to your question. I really don't see any reason why would anybody use string interpolation in this selector:

#{h1, h2, h3, h4, h5}
{
    color: #000;
}

My best guess is that sass variable will be added later to that selector, or the selector will be completely replaced with a variable.

Answer 3

It, combined with {} indicates something that should be interpolated .

ie replaced with the value of a variable.