SCSS / SASS - 动态生成CSS类

Question

我刚刚遇到一种情况，我希望在mixin的帮助下自动生成一系列css类。所以我想知道是否有办法动态地制作它。

基本上我有像

这样的课程

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

tile-2的高度是tile-1的高度的两倍，tile-3的高度是tile-1的高度的三倍，依此类推

我还创建了一个非常简单的mixin，可以在scss变量中设置基本高度并从那里计算出来：

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

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

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

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