较少的递归混合函数不能正常工作

Question

所以我写了这个递归混音，用更少的时间旋转颜色，每次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>

我知道类似的递归混合器转义类名为：~(“..color@{index}”){

但这完全会产生一个错误，并没有输出任何结果。

任何帮助都将不胜感激。我一直在看这个

Answer 1

问题是，在每次迭代中，您并不是在旋转相同的颜色。我将您的混合代码简化为下面的基本代码，这样您就可以看到问题所在：

.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度，并再次调用混音与旋转的颜色。这意味着你不只是像看起来那样增加30度的步数，而是30的倍数(+30，+60，+90，+120)，所以在你完成之前，你最终会旋转360度以上。这就是为什么你会得到重复的颜色。

如果您希望使用30度的步骤来避免重复颜色，请使用未旋出的颜色调用混合器：

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