在LESS中为多个类似元素更改颜色的最有效方法是什么？ [英] What is the most effective method to change color for multiple similar elements in LESS?

问题描述

我有 li 的集合，每个都有不同的背景颜色，例如：

I have a collection of li, each with different background colors like these:

                        &.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 ，所以这里是我尝试：

Now I need to make the background color darkens according to its current background color when mouse is hovered. If possible, I don't want to add so many &:hover on each of the menu, so here's what i tried:

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

这不工作，是否有任何有效的方法， c $ c>&：hover 只有一次，它会影响所有 li s？

This is not working, is there any efficient way where i can do &:hover only one time and it affects all the lis?

- EDIT -

遵循@七阶段最高建议我将代码更新为类似

Following @seven-phase-max suggestion I updated the code into something like this

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

.menu-lists（）{
.-（5）
.-（@ i）when（@i> 0）{
.-（（i-1））;

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

}

这很好，除了白色，红色等被翻译成十六进制颜色（menu-＃ffffff，menu-＃ff0000）。当我把它改为：

That works fine, except that the white, red, etc, is translated into hex color (menu-#ffffff, menu-#ff0000). It did work when i changed it to:

@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））;

.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）

But is there any way so I could use the first solution? (ex. translate white as "white" not "#ffffff")

推荐答案

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

Use LESS mixins, lists and loops to generate a repetitive CSS code:

@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:  e(extract(@value, 1));
        @color: extract(@value, 2);
        .menu-template(@name, @color);
    }
}

li {
    .make-menus();
}

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

It is possible to use the .menu-template mixin directly without need for the @product-colors list and the corresponding loop. This actually results in a shorter and more readable code (until you need these colors to generate some other repetitive CSS classes):

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

这篇关于在LESS中为多个类似元素更改颜色的最有效方法是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！