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匹配它们。我可以像我在这里所做的那样做，并将价值放在手写中，但看起来Sass可能会这样做，所以我宁愿花时间去做正确的事情，更多地了解Sass，而不是半个工作。

希望这是有道理的并且不是一个荒谬的愚蠢问题 - 我会承认（并且你不会惊讶地听到）我是一个非常原始的Sass新兵，但我想我可以从这个问题中学习。 / p>

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＆＃39; interpolation syntax

在任何地方添加变量

Answer 2

您可以做的更简单的方法是使用名为b11的ID或类（或bg11，字母是任意的）

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

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

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

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

2 个答案: