SCSS/SASS - 动态生成CSS类

Question

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

基本上我有类似的课程

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

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

我还创建了一个非常简单的mixin,可以在scss变量中设置base-height并从那里计算出来:

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

当$tile-height正在从另一个SCSS文件加载.

有没有办法在样式表中动态生成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); }
}