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