基于SASS

Question

我正在使用SASS和Angular 6.我的类名level是在带有动态后缀的javascript中生成的，例如level-1或level-10。 我想计算scss文件中的填充取决于该后缀。 应该是这样的：

level- $ {   padding-left：calc（$ * 10）px }

有可能吗？

Answer 1

是的，您可以在SASS中编写一个循环来生成类，例如这样。

@for $i from 1 through 10 {
  .levels-#{$i} {
    padding-left: 10px * $i;
  }
}