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

显然我需要在某处使用组合器（＆amp;）。但我似乎无法弄清楚到底在哪里。到目前为止，我所尝试的所有内容都会导致解析错误或意外结果。甚至可以开始吗？

任何帮助都将不胜感激。

Answer 1

[迟到的答案，但最好还有一个]

从 LESS 1.3.1 （2012年10月）起，您可以使用.@{classname}代替(~"@{classname}")动态生成类名，然后允许使用{{ 1}}在类之前和这段代码

LESS：

将生成所需的 CSS：

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

Answer 2

有一项功能请求允许＆amp;在逃脱选择器或应对这种情况，但我不认为现在有一个解决方法。如果你找到一个我想知道的。

LESS CSS动态类名

2 个答案: