LESS CSS Dynamic Class Name

class, css, dynamic, less

Solution

[ Late answer, but better to have one here ]

As of LESS 1.3.1 (Oct 2012) you can use `.@{classname}` instead of `(~"@{classname}")` to dynamically generate class names, which then allows for the use of `&` before the class and this code

in LESS:

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

will produce the desired CSS:

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

Problem

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.

Original source