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

Question

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

我在其他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();

那么它就能正常工作了。有什么办法我能做到吗？

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

(在：https://www.sassmeister.com/中测试)

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

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

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