Question

编辑：问题可能是无点的错误，这是我们正在使用的。

我尝试编写Less Mixin方法来编写大量CSS样式。该方法的一般格式是：

.icon-styles(@name) {

    .@{name}-icon {
        background-image: url('../images/icon-@{name}.png');
        display: none;
    }

    [data-@{name}="true"] .@{name}-icon {
        display: inline-block;
    }
}

这样只有在包含对象具有相关属性集时，图标才可见。

但是，我在属性选择器上收到错误消息：

Expected ']' but found '{'

指向方括号内的@。

我发现了这篇文章：

LESS mix variable into attribute name in an attribute selector expression

有一个类似的问题，答案表明它可能是一个错误，但不幸的是，解决方法对我没有用。我试图在括号内写出attr时遇到同样的错误。

我也尝试过这样写：

[~'data-@{name}'="true"] .@{name}-icon {

哪个摆脱了错误，但是@ {name}未在生成的css中解析。

有没有人知道是否有任何方法可以实现我的目标？

Answer 1

诀窍与LESS mix variable into attribute name in an attribute selector expression中建议的相同。您只是忽略了它的主要观点：＆＃34; [attr]块＆＃34;中不支持插值变量的连接，因此您需要移出它：

.icon-styles(@name) {

    .@{name}-icon {
        background-image: url('../images/icon-@{name}.png');
        display: none;
    }

    @data-name: ~'data-@{name}';
    [@{data-name}="true"] .@{name}-icon {
        display: inline-block;
    }
}

使用属性选择器中的变量更少Mixin

1 个答案: