variables - 使用选择器的名称作为 SASS 中变量的值

Question

我想获取我正在应用样式的 div 的 ID，并设置一个变量以将该 ID 作为其值。这是 Sass 可以做的吗？所以选择器 #eleven将变量的值设置为“十一”。

这是当前的代码。首先是我正在使用的 mixin:

@mixin left-icon ($bgcolor, $bgurl, $iconmargin) {
    background: $bgcolor url(images/#{$bgurl}.png) no-repeat left 5px center;
    & h2, & p {margin-left: $iconmargin;}
}

这是我调用 mixin 的时候:

#eleven {
    @include left-icon(#de4c3f,eleven,$defaulticonmargin);
}

因此，当我使用该 mixin 时，会设置背景颜色、文件名的一部分和边距值(添加到某些子选择器中)。如您所见 $bgurl变量匹配选择器的名称。基本上我想自动化，以便 $bgurl将设置为 ID 中的文本字符串(去掉哈希符号)。

原因是我将有几十个具有相同基本模式但具有独特背景图像的框，在我看来，最简单的方法是使用 ID 名称作为文件名保存每个 PNG，然后然后让 Sass 匹配它们。我可以像我在这里所做的那样做，并将值(value)放在手头上，但似乎 Sass 可能会做一些事情，所以我宁愿花时间做正确的事情并学习更多关于 Sass 的知识，而不是做一半的工作。

希望这是有道理的，而不是一个荒谬的愚蠢问题——我承认(听到你不会感到惊讶)我是一个非常原始的 Sass 新兵，但我想我可以从这个问题中学习。

Answer 1

尝试这样的事情:

@mixin left-icon ($bgcolor, $bgurl, $iconmargin) {
  ##{$bgurl} {
    background: $bgcolor url(images/#{$bgurl}.png) no-repeat left 5px center;
& h2, & p {margin-left: $iconmargin;}
  }
}

@include left-icon(#de4c3f,eleven,10px);

基本上，您可以使用 Sass 的 interpolation syntax 在任何地方添加变量。