LESS CSS Dynamic Class Name

Viewed 2742

I am writing this LESS file and I kind of stuck.

The code is as follows:

.flag (@code) {
    (~'.@{code}') {
        + label {
            &:after {
                background-image: url('images/flags/@{code}.png');
            }
        }
    }
}

input[type='radio'] {
    &.flag {
        .flag(us);
    }
}

Right now, this produces the following CSS (note the space between .flag and .us)

input[type='radio'].flag .us + label:after {
    background-image: url('images/flags/us.png');
}

However, the result that I am looking for should be as following:

input[type='radio'].flag.us + label:after {
    background-image: url('images/flags/us.png');
}

Obviously I need the combinator (&) somewhere. But I can't seem to figure out where exactly. Everything I have tried so far results either in parsing errors or undesired results. Is it even possible to begin with?

Any help would be appreciated.

2 Answers
Related