Question

所以我用Less编写了这个递归mixin，每次旋转颜色30度，持续12个周期（12 * 30 = 360）。但是，出于某种原因，我的一些h1标签的颜色完全相同。

#slab9 {
    .slabBG-color(#fff, 880px);
    .container {
        width:400px;
        @original:#95e858;
        float:left;
        margin:20px 40px;

        .color(@index, @color, @degrees:0) when (@index > 0) {
            @sColor:spin(@color, @degrees);
            .color-@{index} {   
                color:@sColor;
                span {
                    color:darken(@sColor, 10%);
                }
            }
            .color(@index - 1, @sColor, @degrees + 30);
        }
        .color(12, #95e858);

 (...)

    <section id="slab9">
      <div class="container">
        <h1 class="color-12">REST &<br /><span class="large">RELAX</span></h1>
      </div>
      <div class="container">
        <h1 class="color-11">REST &<br /><span class="large">RELAX</span></h1>
      </div>
      <div class="container">
        <h1 class="color-10">REST &<br /><span class="large">RELAX</span></h1>
      </div>
      <div class="container">
        <h1 class="color-9">REST &<br /><span class="large">RELAX</span></h1>
      </div>
      <div class="container">
        <h1 class="color-8">REST &<br /><span class="large">RELAX</span></h1>
      </div>
      <div class="container">
        <h1 class="color-7">REST &<br /><span class="large">RELAX</span></h1>
      </div>
      <div class="container">
        <h1 class="color-6">REST &<br /><span class="large">RELAX</span></h1>
      </div>
      <div class="container">
        <h1 class="color-5">REST &<br /><span class="large">RELAX</span></h1>
      </div>
      <div class="container">
        <h1 class="color-4">REST &<br /><span class="large">RELAX</span></h1>
      </div>
      <div class="container">
        <h1 class="color-3">REST &<br /><span class="large">RELAX</span></h1>
      </div>
      <div class="container">
        <h1 class="color-2">REST &<br /><span class="large">RELAX</span></h1>
      </div>
      <div class="container">
        <h1 class="color-1">REST &<br /><span class="large">RELAX</span></h1>
      </div>
    </section>

我知道类似的递归mixins会逃避类名：〜（“。color - @ {index}”）{
但这会产生一个错误并且什么都不输出。

非常感谢任何帮助。我一直在看这个

Answer 1

问题是你没有在每次迭代中旋转相同的颜色。我将你的mixin减少到下面的基本代码，这样你就可以看到问题了：

.container {

  .color(@index, @color, @degrees:0) when (@index > 0) {
    @sColor: spin(@color, @degrees); // here you spin 30 degrees

    .color-@{index} {
      color: @sColor;
      content: @degrees;
    }
    // here you call the mixin again with the spinned color and + 30 degrees!
    .color(@index - 1, @sColor, @degrees + 30); 

  }

  .color(12, #ff0000);
}

你正在旋转颜色+30度，并再次使用旋转颜色调用mixin 。这意味着你不仅仅是增加30度的步长，而是 30的倍数（+ 30，+ 60，+ 90，+ 120）所以你最终会多次旋转360度在你结束之前。这就是你重复颜色的原因。

如果你希望30度的步骤可以避免重复颜色，请使用未固定的颜色调用mixin：

.container {

  .color(@index, @color, @degrees:0) when (@index > 0) {
    @sColor: spin(@color, @degrees);

    .color-@{index} {
      color: @sColor;
      content: @degrees;
    }

    .color(@index - 1, @color, @degrees + 30);

  }

  .color(12, #ff0000);
}

减少递归mixin功能无法正常工作

1 个答案: