在 LESS 中为多个相似元素更改颜色的最有效方法是什么？

Question

我有一组li，每个都有不同的背景颜色，如下所示：

                    &.menu-white {
                        background-color: @product-white;
                        color: darken(@product-white, 20%);
                    }

                    &.menu-green {
                        background-color: @product-green;
                        color: darken(@product-green, 20%);
                    }

                    &.menu-yellow {
                        background-color: @product-yellow;
                        color: darken(@product-yellow, 20%);
                    }

                    &.menu-black {
                        background-color: @product-black;
                        color: lighten(@product-black, 20%);
                    }

                    &.menu-red {
                        background-color: @product-red;
                        color: darken(@product-red, 20%);
                    }

现在我需要根据鼠标悬停时的当前背景颜色使背景颜色变暗。如果可能的话，我不想在每个菜单上添加这么多&:hover，所以这是我尝试过的：

&:hover {
     background-color: darken(inherit, 10%);
}

这不起作用，有没有什么有效的方法可以让我只做一次&:hover，它会影响所有lis？

--编辑--

按照@seven-phase-max 的建议，我将代码更新为这样的内容

@product-types: white #E2E0DE,
            green #95CFAB,
            yellow #FEC63E,
            black #505858,
            red #EE5C60;

.menu-lists() {
    .-(5);
    .-(@i) when (@i > 0) {
        .-((@i - 1));

        @type: extract(@product-types, @i);
        @color: extract(@type, 1);
        &.menu-@{color} {
            background-color: extract(@type, 2);
            color: darken(extract(@type, 2), 50%);

            &:hover {
                background-color: darken(extract(@type, 2), 10%);
            }
        }
    }
}

这很好，除了白色、红色等被转换为十六进制颜色（菜单-#ffffff、菜单-#ff0000）。当我将其更改为时它确实有效：

@product-types: menu-white #E2E0DE,
            menu-green #95CFAB,
            menu-yellow #FEC63E,
            menu-black #505858,
            menu-red #EE5C60;

.menu-lists() {
    .-(5);
    .-(@i) when (@i > 0) {
        .-((@i - 1));

        @type: extract(@product-types, @i);
        @color: extract(@type, 1);
        &.@{color} {
            background-color: extract(@type, 2);
            color: darken(extract(@type, 2), 50%);

            &:hover {
                background-color: darken(extract(@type, 2), 10%);
            }
        }
    }
}

但是有什么办法可以让我使用第一个解决方案吗？ （例如，将白色翻译为“白色”而不是“#ffffff”）

Answer 1

使用 LESS 混合、列表和循环来生成重复的 CSS 代码：

@product-colors:
    white  #fff,
    green  #0f0,
    yellow #ff0,
    black  #000,
    red    #f00;

.menu-template(@name, @color) {
    &.menu-@{name} {
        background-color: @color;
        color: darken(@color, 20%);
        &:hover {
             background-color: darken(@color, 10%);
        }
    }
}

.make-menus() {
    .-(length(@product-colors));
    .-(@i) when (@i > 0) {
        .-((@i - 1));
        @value: extract(@product-colors, @i);
        @name:  extract(@value, 1);
        @color: extract(@value, 2);
        .menu-template(@name, @color);
    }
}

li {
    .make-menus();
}

可以直接使用.menu-template mixin，而不需要@product-colors 列表和相应的循环。这实际上会导致代码更短且更易读（直到您需要这些颜色来生成其他一些重复的 CSS 类）：

li {
    .menu-template(white,  #fff);
    .menu-template(green,  #0f0);
    .menu-template(yellow, #ff0);
    .menu-template(black,  #000);
    .menu-template(red,    #f00);
}