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

Question

我想获取要应用样式的 div 的 ID，并设置一个变量以将该 ID 作为其值。这是萨斯能做到的吗？所以选择器#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 匹配它们。我可以像我在这里所做的那样做，并把价值放在手边，但这似乎是 Sass 可能做的事情，所以我宁愿花时间把它做好并更多地了解 Sass，而不是做一半的工作。

希望这是有道理的，而不是一个可笑的愚蠢问题——我承认（你不会对此感到惊讶）我是一个非常原始的 Sass 新兵，但我认为我可以从这个问题中学到东西。

Answer 1

您可以改为使用名为b11（或bg11，字母是任意的）的ID或类来简化它

$colorArray = [ #de4c3f, ... ];
@for $i from $min through $max {
    .b#{$i} {
        @include left-icon(colorArray[$i], $i, $defaulticonmargin);
    }
}

然后更改背景名称以匹配新格式，如images/#11.png 或您可以使用this process 将字符串转换为int

这样您就可以递归地定义所有元素！

Answer 2

试试这样的：

@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 在任何地方添加变量