LESS CSS动态类名

Question

我正在写这个LESS文件,我有点卡住了.

代码如下:

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

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

现在,这会产生以下CSS(注意.flag和.us之间的空格)

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

但是,我要找的结果应如下:

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

显然我需要组合器(&)某处.但我似乎无法弄清楚到底在哪里.到目前为止,我所尝试的所有内容都会导致解析错误或意外结果.甚至可以开始吗？

任何帮助,将不胜感激.

Answer 1

[迟到的答案,但最好在这里有一个]

从LESS 1.3.1(2012年10月)开始,您可以使用.@{classname}而不是(~"@{classname}")动态生成类名,然后允许&在类和此代码之前使用

在LESS:

.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');
}

Answer 2

有一个功能请求允许在转义选择器中使用 & 或处理这种情况，但我认为目前没有解决办法。如果你找到了我想知道。