Question

我想要实现的是这样的：

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

因此，如果我将类indent-me-10添加到某个元素，它将收到样式text-indent: 25em。我想这样做是因为1）我需要相当大的灵活性（可能赢得超过4级左右＆＃34;缩进＆＃34;但我喜欢覆盖我的所有基础 - 这些类将由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);
  } 
}

有没有办法在SASS中传递一个类的参数？

1 个答案: