如何在less.js中為DRY編寫循環function或混合變量

Question

有沒有什么有效的方法可以用less.js編寫這段代碼：

• 我已經有 3 個變量 colors：@vert、@violet 和 @orange

li {
    &:nth-child(1) {
        background: @vert;
        &:hover,
        &.open {
            >.dropdown-menu li {
                background: @vert;
            }
        }
    }
    &:nth-child(2) {
        background: @violet;
        &:hover,
        &.open {
            >.dropdown-menu li {
                background: @violet;
            }
        }
    }
    &:nth-child(3) {
        background: @orange;
        &:hover,
        &.open {
            >.dropdown-menu li {
                background: @orange;
            }
        }
    }
}    

我想到了一個mixin ，但我寫得不好：有什么幫助嗎？

.colored-menu(@number, @color) {
    &:nth-child(@number) {
        background: @color;
        &:hover,
        &.open {
            >.dropdown-menu li {
                background: @color;
            }
        }
    }
}

並這樣稱呼它：

.colored-menu(1,@vert);
.colored-menu(2,@violet);
.colored-menu(3,@orange);

Answer 1

您可以使用您的方法進行一些編輯：

// mixin
.colored-menu(@number; @color) { // the docs recommends semi-colons instead of commas
  &:nth-child(@{number}) { // variable requires curly brackets for interpolation
    background: @color;
    &:hover,
    &.open {
      > .dropdown-menu li {
        background: @color;
      }
    }
  }
}

// ruleset
li {
  .colored-menu(1; @vert);
  .colored-menu(2; @violet);
  .colored-menu(3; @orange);
}

另外，考慮使用each列表 function：

// list
@colors: @vert, @violet, @orange;

// ruleset
li {
  each(@colors, {
    &:nth-child(@{index}) {
      background: @value;
      &:hover,
      &.open {
        > .dropdown-menu li {
          background: @value;
        }
      }
    }
  });
}

兩種方法的 output 是相同的（在這種情況下）。