时间戳

首页 > 解决方案 > 有没有办法通过 SASS 中的类传递参数？

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

问题描述

我想要实现的是这样的：

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

因此，如果我将类添加indent-me-10到某个元素，它将收到 style text-indent: 25em。我想这样做是因为 1）我需要相当大的灵活性（可能不会超过 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; }
...

标签： sass

解决方案

您可以通过结合使用 SCSS 插值和循环来实现此目的。

使用 sass 插值#{$variable}

$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);
  } 
}

推荐阅读