What is the most effective method to change color

Question

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

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

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));

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

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));

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

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

Answer 1

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

li {
    .make-menus();
}

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