有没有办法通过SASS中的类传递参数？

Question

我想要达到这样的目标：

.indent-me-($num) {
    text-indent: ($num * 2.5em);
}

因此，如果我将类indent-me-10添加到某个元素中，它将收到样式text-indent: 25em。我之所以想这么做，是因为我需要相当大的灵活性(大概不会有超过4个级别的“缩进”，但我希望覆盖所有的基--这些类将由javascript逻辑生成，我不是硬编码到HTML中)；以及( 2)我不想用像SASS这样聪明的语言编写类似于下面的内容。我不太熟悉它的所有错综复杂之处，所以我觉得我一定是错过了什么。

.indent-me-1 { text-indent: 2.5em; }
.indent-me-2 { text-indent: 2 * 2.5em; }
.indent-me-3 { text-indent: 3 * 2.5em; }
.indent-me-4 { text-indent: 4 * 2.5em; }
...

Answer 1

您可以通过使用SCSS插值和循环的组合来实现这一点。

基于#{$variable}的sass插值

$num: 1;
.indent-me-#{$num} {
    text-indent: ($num * 2.5em);
}

以及一个@for循环来完成这个任务。

@for $num from 1 through 10 {
  .indent-me-#{$num} {
    text-indent: ($num * 2.5em);
  } 
}