Geek asks and answers

LESS CSS Dynamic Class Name

I am writing this LESS file, and I'm 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);
    }
}

This is creating the following CSS right now (note the space between .flag and .us)

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

However, the result I'm looking for should look like this:

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

Obviously I need a combinator (&) somewhere. But I can’t understand exactly where. Everything that I have tried so far leads either to parsing errors or to undesirable results. Is it even possible to start with?

Any help would be appreciated.

+5
source share
2 answers

[ Late answer, but better to have it here ]

LESS 1.3.1 ( 2012) .@{classname} (~"@{classname}") , &

:

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

CSS:

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

, , . , .

+1

More articles:


All Articles