尖锐（＃）（例如＃{$ variable}）在SCSS中意味着什么？

Question

我正在检查一篇文章并遇到类似以下内容：

$desktop-width: 1024px;

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

并且想知道为什么使用尖锐的（＃）？你不能min-width: $desktop-width吗？

提前感谢您，并接受回答/投票

Answer 1

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

Answer 2

#{}用于字符串插值：http://sass-lang.com/documentation/file.SASS_REFERENCE.html#interpolation_

  

但是有一个例外：当使用＃{}插值时，引用的字符串是不加引号的。这使得它更容易使用，例如mixins中的选择器名称。例如。

因此，有时使用此技术允许在选择器中使用sass值。 E.g：

$gutter: 10;

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

现在回答你的问题。我真的没有看到任何人在这个选择器中使用字符串插值的原因：

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

我最好的猜测是sass变量稍后会添加到该选择器中，或者选择器将完全替换为变量。

Answer 3

结合{}表示应该interpolated。

即。替换为变量的值。