Less CSS Mapping issue

问题

I'm trying to get the maps function to work in the following scenario:

@state-colors: {
    @light: {
        hover: blue;
        focus: red;
        active: green;
    }
}

.mdc-states-on(@state; @tone) {
     &:@{state}::after {
        background-color: @state-colors[@@tone][@@state];
    }
}

.mdc-button-state-on(@tone) {
    .mdc-states-on(hover; @tone);
}

As you can see, I call mdc-button-state-on, which then creates the property I need via mdc-states-on.

The above doesn't currently compile.

The issue is with the @@state value. As a variable it's not working, but if I substitute it for, say a constant, such as 'hover', it does compile.

background-color: @state-colors[@@tone][hover];  // compiles

I've tried changing @@state to @state, @{state} etc. but haven't found a solution that works.

Would appreciate some expert help to determine if this can be made to work, or help with an alternative pattern.

来源：https://stackoverflow.com/questions/54400988/less-css-mapping-issue