较少mixin与循环创建背景图像

Question

我需要为盒子创建许多背景图像，我想使用mixins。我想用2个参数调用它：数字和名称。

我试过了：

.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个参数却没有。

Answer 1

好的问题是你已经过度复杂化并缺少第二个参数。上面的代码调用计数器，它不是递归的mixin，内部递归mixin不会在任何时候被调用，这就是为什么你永远不会看到任何生成的代码。它不像许多其他编程语言那样运行函数内部的代码

.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);

递归mixin .counter(@counter, @name: name) when (@counter > 0)

你需要第二个参数，它需要是可选的，因为你没有把它称为.counter((@counter - 1));

要么

你将它传递给我在上面的代码.counter(@counter, @name)中完成的count-1调用然后再次在.counter((@counter - 1), @name);

你不需要外部mixin，它没有任何意义

你可以在这里测试https://lesstester.com/