使用Sass从类中获取数字

Question

如果有一个类名为'class-name-X'（其中X可能是0到9的数字），我想为它们创建一个特定的类，如下所示：

.class-name-{X} {
  height: {X} + 'px';
}

这有可能吗？我知道使用数组可以实现，但是这个来自JS到HTML，所以在CSS中我只能得到类名。

- Dani

---

再帮我们一下 - 确认您的代码块是在scss中，并且您想让sass编译器在css文件中生成10个不同的类。 - Elemental

也许这个问题可以帮到你 https://stackoverflow.com/questions/38591573/sass-loops-for-usage - Elemental

可能是根据选择器在SASS中设置变量的重复问题。 - TylerH

我的scss文件中没有任何代码。所有的工作都是由JS和HTML完成的。 第一个链接使用了一个数组。我知道这种方法，但正如注释所说，我根本没有数组，HTML已经包含了所有的变量。 第二个链接在不同的块中重复使用颜色变量，这不是我想要的。我只想要一个块。 - Dani

Answer 1

您可以使用@for指令来迭代数字（例如在您的用例中为0到9），并使用字符串插值将当前索引作为类名的一部分注入，还可用于width属性：

$start: 0;
$end: 9;

@for $i from $start through $end {
  .class-name--#{$i} {
    width: #{$i}px;
  }
}

请记住，SASS 是一种预编译语言，因此您需要编译它，然后使用生成的 CSS 来为您的页面提供样式；)

- Terry