Question

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

我尝试过：

/**
 * @Route("/{id}/edit", name="company_user_edit", methods={"GET","POST"}, requirements={"id"="\d+"})
 * @ParamConverter("id", class="CompanyUser", options={"id": "id"})
 */

最后我希望它输出：

.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'); }并仅使用1个参数@name时，它将起作用。但是有2个参数却没有。

Answer 1

好吧，问题在于您过于复杂，缺少第二个参数。上面的代码调用不是递归混合的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));

OR

您将其传递给我在上面的代码.counter(@counter, @name)中进行的count-1调用，然后在.counter((@counter - 1), @name);处再次输入

您不需要外部混合，它没有任何作用

您可以在这里https://lesstester.com/

进行测试

LESS mixin与循环创建背景图像

1 个答案: