Css 较少递归的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>

#slab9{
.slabBG颜色（#fff，880px）；
.集装箱{
宽度：400px；
@原件：#95e858；
浮动：左；
利润率：20px 40px；
.color（@index，@color，@degrees:0）时（@index>0）{
@颜色：旋转（@color，@degrees）；
.color-@{index}{
颜色：@sColor；
跨度{
颜色：深色（@sColor，10%）；
}
}
.颜色（@index-1，@sColor，@degrees+30）；
}
.颜色（12，#95e858）；
(...)
休息&
放松
休息&
放松
休息&
放松
休息&
放松
休息&
放松
休息&
放松
休息&
放松
休息&
放松
休息&
放松
休息&
放松
休息&
放松
休息&
放松

我知道类似的递归mixin会逃逸类名，比如：~（“.color-@{index}”）{
但这会产生一个错误，并且什么也不输出

---

如果有任何帮助，我将不胜感激。我一直在研究这个问题。问题是您在每次迭代中都没有旋转相同的颜色。我将您的混音减少到下面的基本代码中，以便您可以看到问题：

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