LESS CSS 动态类名答案

【问题标题】：LESS CSS Dynamic Class NameLESS CSS 动态类名
【发布时间】：2012-08-12 03:22:18
【问题描述】：

我正在编写这个 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');
}

显然我在某处需要组合符 (&)。但我似乎无法弄清楚到底在哪里。到目前为止，我所做的一切都会导致解析错误或不希望的结果。甚至可以开始吗？

任何帮助将不胜感激。

【问题讨论】：

标签： css class dynamic less

【解决方案1】：

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

从 LESS 1.3.1（2012 年 10 月）开始，您可以使用 .@{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');
}

【讨论】：

【解决方案2】：

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

【讨论】：