Как правильно передать переменную в mixin (SCSS)?

Question

[Михаил Р.]

Приветствую!

Пробую реализовать некий mixin, который будет выполнять всю шаблонную работу, а мне останется лишь передавать в него нужные конструкции в виде классов и их свойств.

Что должно получиться на выходе:

.test-1 {
  color: red;
}

.test-2 {
  color: red;
}

.test-3 {
  color: red;
}

Как вижу это я:

@mixin get() {
  @for $i from 1 through 3 {
    @content;
  }
}

@include get() {
  .test-#{$i} {
    color: red;
  }
}

В моем варианте компилятор ругается, мол переменной $i еще не существует, а я ее пытаюсь передать в mixin. Ошибку я понимаю, но как тогда решить задачу с присвоением $i в конце названия класса test внутри тела mixin get?

Спасибо!

Answer 1

[Матвей Феникс]

Блоки контента, переданные в миксин, вычисляются в той же области видимости, где определён этот блок, а не миксин. Это значит, что локальные переменные миксина не могут быть использованы в передаваемом блоке контента и переменные будут восприняты как глобальные - источник.

Comments

[Михаил Р.]

Т.е. в моем случае, если требуется изменять наименование класса, то необходимо выполнить цикл до, подключения mixin ?

[Матвей Феникс]

Mike Ro, я бы решил так:

@mixin get($name) {
  @for $i from 1 through 3 {
      .#{$name}#{$i} {
      @content;
    }
  }
}

@include get(test){
  color: red;
};

Результат в css:

.test1 {
  color: red;
}

.test2 {
  color: red;
}

.test3 {
  color: red;
}

[Михаил Р.]

Матвей Феникс, интересный вариант, спасибо!

[Матвей Феникс]

Mike Ro, не за что)