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一次li它会影响所有@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%); } } } }？

- 编辑 -

按照@ seven-phase-max建议我将代码更新为类似

的内容

@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%);
            }
        }
    }
}

除了将白色，红色等转换为十六进制颜色（menu-＃ffffff，menu-＃ff0000）之外，其工作正常。当我将其更改为：

时，它确实有效

{{1}}

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

Answer 1

使用LESS mixins，list和循环生成重复的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);
}

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

1 个答案: