如何在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 是相同的（在这种情况下）。