How to loop a nested ruleset in less?

Question

I am trying to each a nested ruleset in less, because it makes my code clear. Like this:

@m-button-sizes:
    x-large;

@m-button-sizes-rules: {
    @x-large: {
        height: 50px;
        padding: 15px 25px;
    }
};



.box {
    each(@m-button-sizes, {
        @x: @m-button-sizes-rules[@@value];

        .test {
            @x();
        }

    })
}

But I feel the @m-button-sizes was repetitive. Is there any way to remove it? I've also tried doing something, but failed(like this).

@m-button-sizes-rules: {
    @x-large: {
        height: 50px;
        padding: 15px 25px;
    }
};


.box {
    each(@m-button-sizes-rules, {
        @x: @m-button-sizes-rules[@key];

        .test {
            @x();
        }

    })
}

Answer 1

you can use .@{key} and @value() syntax

.box {
    each(@m-button-sizes-rules, {
        .@{key} {
            @value();
        }
    })
}