SCSS中的.#代表什么？

Question

我有一段带有 .# 的示例代码。

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

除了另一个示例，我在谷歌上找不到任何信息

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

这是什么意思？

- Tristan Warren

---

如果不确定，检查输出的 CSS。 - 4castle

Answer 1

这个表达式有两个部分，. 是 CSS 类选择器，#{} 是 插值 语法，它允许在选择器和属性名称中使用变量。

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

生成的 CSS：

p.foo {
  border-color: blue; }

- Kld

Answer 2

.实际上是一个类名，与#无关。 #{$name} 是以转义格式输出变量名。如果变量包含破折号等字符，则sass不会将其视为减法。

以下是一个示例：使用SASS，如何在字体声明中转义斜杠字符？

- jerrylow