5

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

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

任何帮助，将不胜感激。

4

2 回答 2

7

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

从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');
}
于 2013-04-29T05:29:28.353 回答
1

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

于 2012-08-15T21:10:38.300 回答