Как создать n правил динамически, используя @function?

Question

Мой вопрос действительно прост.Как мы можем создавать правила внутри функции.Например, мы хотим создать 5 классов для размера шрифта.Мы будем делать так:

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

Но что, если мы хотим сделать это с помощью функции.На самом деле я хочу сделать то же самое для других свойств, как я сделал для font-size.Поэтому я создаю функцию, которая получит некоторые данные, а затем создаст наборы правил. Но проблема в том, что я не могу использовать наборы правил внутри функции.

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

Answer 1

Просто используйте @mixin вместо @function:

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

@include createRuleSets( 20px );

Функции, возвращающие значения, а не наборы правил.Миксины позволяют смешивать наборы правил.https://sass -lang.com / documents / at-rules / mixin

(я добавил аргумент в mixin, чтобы показать, как они на самом деле работают почти так же, как функции, за исключением наборов правил.)