SCSS / SASS - CSS类的动态生成

Question

我刚刚遇到了一种情况，我想在混入的帮助下自动生成一系列css类。所以我想知道是否有一种方法可以动态实现这一点。

基本上我有像这样的类

.tile-1, .tile-2, .tile-3, .tile-4 ...

其中，times 2是times 1高度的两倍，times 3是times 1高度的三倍，依此类推

我还创建了一个非常简单的混入，以便能够在scss变量中设置base-height，并从那里计算它：

@mixin tile-height($size) {
    height: $size * $tile-height;
}

从另一个scss文件加载$tile-height的位置。

有没有办法在样式表中动态地生成我的tile-x类，使用classname中的数字作为混合参数？

Answer 1

这就是你正在看的东西吗@for

$tile-height: 20;

@mixin tile-height($size) {
  height: $size * $tile-height + px;
}

@for $i from 1 through 5 {
  .tile-#{$i} { @include tile-height($i); }
}