嘿，这个场景我太熟悉了！你遇到的问题是Sass默认不会把size-$i()这种拼接出来的字符串当成函数调用，只会把它当作普通文本输出。要实现动态调用自定义函数，得用到Sass内置的call()函数。

直接解决方案：用call()实现动态函数调用 #

修改你的循环代码，把函数调用改成call()的形式就行：

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

call()函数的作用就是告诉Sass：“把这个字符串对应的函数找出来并执行它”。这里我们通过"size-#{$i}"拼接出正确的函数名字符串，再传给call()，就能成功调用对应的size-1()、size-2()等函数了。

更优雅的优化方案：合并成单一参数化函数 #

其实你现在的多个size-n()函数可以合并成一个接收参数的函数，这样不仅避免了动态调用的麻烦，后续维护也更省心：

// 替换原来的多个size-*函数
@function size($n) {
  @return #{ ( $n * 8 / 16 ) }rem;
}

// 循环生成工具类，直接调用参数化函数
@for $i from 1 through 18 {
  .mt-#{$i} { 
    margin-top: size($i); 
  }
}

这个方案更符合Sass的最佳实践，你只需要维护一个函数，后续调整尺寸规则的时候改一处就行。

为什么原来的写法不行？ #

你之前写的margin-top: size-$i();，Sass会把它解析成一个字符串值，而不是函数调用。因为Sass的语法里，函数调用必须是明确的函数名，不能通过字符串拼接直接生成调用语句，这时候就需要call()来做“中转”，把字符串转换成可执行的函数引用。

内容的提问来源于stack exchange，提问作者Lovelock