1

所以我用 Less 编写了这个递归混合，我每次将颜色旋转 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}") {
但这会完全产生错误并且什么也不输出。

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

4

1 回答 1

2

问题是您在每次迭代中都没有旋转相同的颜色。我将您的 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);
}
于 2014-07-03T19:02:42.703 回答