.#{$pretty--class-name}是sass插值法吗？

Question

I found a nice page 用于显示开关（复选框、单选框、滑块等）。自从我编码 html/sass 以来已经有一段时间了，我对此有点困惑 .#{$pretty--class-name}.

我以为你要么用点，要么用散列。但在这里你同时使用两者。这是 SASS 特定的东西，它将 #{$pretty--class-name} 替换为变量名称吗？

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.

但下面的例子并没有使用相同的方法。

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

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

Answer 1

您提到的文档仅指基于另一个变量动态创建变量，这在 SASS 中是不可能的：您必须使用地图来做类似的事情。在您的情况下，只有一种插值方法可以创建 class，而不是另一个 SASS 变量。

因此 .#{$pretty--class-name} 是生成 .pretty class.

的 SASS interpolation syntax 的示例

P.S. 顺便说一下，那个页面真的很棒。感谢分享！

.#{$pretty--class-name}是sass插值法吗？

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

sass

string-interpolation