LESS mixin с циклом создания фоновых изображений - PullRequest
Новая
       10

LESS mixin с циклом создания фоновых изображений

2 голосов
/ 04 апреля 2019

Мне нужно создать много фоновых изображений для ящиков, и я бы хотел использовать миксины.Я хочу назвать его с двумя параметрами: номер и имя.

Я пробовал это: 

.counter(@counter; @name) { // outer mixin
  .counter(@counter) when (@counter > 0) {
    .counter((@counter - 1));    // next iteration
    .cat-wrapper-@{name} .cat-@{counter} {
       background-image: url('/mediafiles/@{name}/cat_@{counter}.jpg')
    }
  }
}

.counter(2;'name');

В конце я хочу, чтобы он вывел: 

.cat-wrapper-name .cat-1 {
    background-image: url('mediafiles/name/cat_1.jpg');
}
.cat-wrapper-name .cat-2 {
    background-image: url('mediafiles/name/cat_2.jpg');
}

Он компилируется без ошибок, но не выводит никакого кода.Когда я удаляю @name и просто использую 1 параметр @counter, это работает.Но с 2 параметрами это не так.

1 Ответ

2 голосов
/ 04 апреля 2019

Хорошо, проблема в том, что вы слишком усложняете ситуацию и пропускаете второй параметр.Ваш код выше вызывает counter, который НЕ является рекурсивным миксином, внутренний рекурсивный миксин никогда не вызывается, поэтому вы никогда не увидите сгенерированный код.Это не так, как во многих других языках программирования, где он запускает код внутри функции 

.counter(@counter, @name) when (@counter > 0) {
    .counter((@counter - 1), @name);    // next iteration
    .cat-wrapper-@{name} .cat-@{counter} {
       background-image: url('/mediafiles/@{name}/cat_@{counter}.jpg')
    }
}

.counter(2, name);

Рекурсивный миксин .counter(@counter, @name: name) when (@counter > 0)

Вам нужен второй параметр, и он должен бытьнеобязательно, так как вы не называете его .counter((@counter - 1));

ИЛИ

, вы передаете его вызову count-1, который я сделал в моем коде выше .counter(@counter, @name), а затем снова на .counter((@counter - 1), @name);

Вам не нужен внешний миксин, он не имеет смысла

Вы можете проверить это здесь https://lesstester.com/

...