css - SCSS/SASS - 动态生成 CSS 类

Question

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

基本上我有这样的类(class)

.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 类，使用类名中的数字作为混合参数？

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