减少混合，从数组中提取颜色并在悬停时，向该数组添加变暗

Question

是否可以用颜色使数组变暗？像这样：

@array: @color1 @color2 @color3 @color4
.color-mix(@i) when (@i > 0) {
    .myClass {
        li:nth-child(@{i}) {
            .background-color(extract(@array, @i));
            &:hover {
              // THIS IS NOT WORKING, IS THERE A RIGHT APPROACH FOR THIS?
                .background-color(extract(darken(@array, 5.5%, @i)));
            }
        }
    .color-mix(@i - 1);
    }
}
// Iterate
.color-mix(4);

Answer 1

如果我对你的问题理解正确，是的，你可以做到。以下是您的操作方法。您的代码几乎是正确的，只是它没有尝试使提取的值变暗，而是试图提取变暗的值（这是不可能的）。

@array: #fff #00f #ff0 #f00;

.color-mix(@i) when (@i > 0) {
  .myClass {
    li:nth-child(@{i}) {
      .background-color(extract(@array, @i));
      &:hover {
        .background-color(darken(extract(@array, @i), 5.5%));
      }
    }
  }
    .color-mix(@i - 1); /* I have moved it because I think it was wrongly placed */
}
// Iterate
.color-mix(4);

我建议对您的代码进行的一项改进是将 :hover 选择器也移动到 .background-color mixin 中，如下所示。这使得它更容易阅读，因为没有将函数调用包装在另一个函数中等等。

@array: #fff #00f #ff0 #f00;

.color-mix(@i) when (@i > 0) {
  .myClass {
    li:nth-child(@{i}) {
      .background-color(extract(@array, @i));
    }
  }
    .color-mix(@i - 1);
}
// Iterate
.color-mix(4);

.background-color(@color){
  &{
    background-color: @color;
    &:hover{
      background-color: darken(@color, 5.5%);
    }
  }
}

更好的是这个 - 如果可以就避免混入:)

@array: #fff #00f #ff0 #f00;

.color-mix(@i) when (@i > 0) {
  .myClass {
    li:nth-child(@{i}) {
      @color: extract(@array, @i);
      background-color: @color;
      &:hover{
        background-color: darken(@color, 5.5%);
      }
    }
  }
    .color-mix(@i - 1);
}
// Iterate
.color-mix(4);

减少混合，从数组中提取颜色并在悬停时，向该数组添加变暗

Less mixin, extract colors from array and on hover, add darken to that array

arrays

less

less-mixins