Sass 如何使用@function动态创建n个规则？

我的问题很简单。我们如何在函数中创建规则。例如，我们想为字体大小创建5个类。我们会喜欢的

@for $i from 0 through 4{
   .size#{$i}{
      font-size:($i * 10)
   }
}

但是如果我们想用一个函数来实现呢。实际上，我想对其他属性执行与对字体大小相同的操作。所以我创建了一个函数，它将接收一些数据，然后创建规则集。但问题是，我不能在函数中使用规则集

@function createRuleSets(){
   @for $i from 0 through 4{
      .size#{$i}{
         font-size:($i * 10)
      }
   }
}

只需使用@mixin而不是@function：

函数返回值，而不是规则集。mixin允许您在规则集中进行混合

我在mixin中添加了一个参数，以显示它们实际上是如何像函数一样工作的，除了规则集。

不能使用@function函数返回值，而不能使用定义，但可以使用@mixin。然后只需使用@include createRuleSets

@mixin createRuleSets( $base: 1px ){
   @for $i from 0 through 4{
      .size#{$i}{
         font-size:($base * $i * 10)
      }
   }
}

@include createRuleSets( 20px );