Css 在循环中使用动态SASS函数名

我通过循环创建了一些实用程序类，但不想使用已经存在的函数

我在其他CSS中使用了一些函数：

@function size-1() {
    @return  #{ ( 8 / 16 ) }rem;
}
@function size-2() {
    @return #{ ( 16 / 16 ) }rem;
}
@function size-3() {
    @return #{ ( 24 / 16 ) }rem;
}
@function size-4() {
    @return #{ ( 32 / 16 ) }rem;
}

但我还创建了一个循环，这样我也可以在标记中使用类：

@for $i from 1 through 18 {
    .mt-#{$i} {
        margin-top: size-$i();
    }
}

我已经尝试（上面）动态调用该函数，但如果我动态调用，它只输出“size-1”的文本。如果我使用直接函数名，例如：

margin-top: size-1();

那么它就可以正常工作了。有什么方法可以做到这一点吗？

使用该函数调用您的：

@function size-1() {
    @return  #{ ( 8 / 16 ) }rem;
}
@function size-2() {
    @return #{ ( 16 / 16 ) }rem;
}
@function size-3() {
    @return #{ ( 24 / 16 ) }rem;
}
@function size-4() {
    @return #{ ( 32 / 16 ) }rem;
}

...

@for $i from 1 through 18 {
    .mt-#{$i} {
        margin-top: call(size- + $i);
    }
}

（测试地点：）

编辑：另一种功能较少的方式：

@function size($num) {
    @return  #{ ( $num/2) }rem;
}

@for $i from 1 through 18 {
    .mt-#{$i} {
        margin-top: size($i);
    }
}

---

太棒了，谢谢。第一次测试混合了实用程序类样式，所有函数的目的是将其他开发人员限制在一定数量的边距等选项上。但是，再次测试时，我将使用一个通用大小函数，该函数映射到允许的大小集，如果不在列表中，则抛出一个错误。