您无法“读取”选择器名称。
但是,您可以构建选择器结合 mixin 中的文件名进行链接,如下所示:
LESS
.buildSelectorConnection(@selectorName, @pre: ~'') {
@{pre}@{selectorName} {
background-image: url('images/@{selectorName}.png');
}
}
.buildSelectorConnection(header, ~'#');
.buildSelectorConnection(do-a-class, ~'.');
CSS输出
#header {
background-image: url('images/header.png');
}
.do-a-class {
background-image: url('images/do-a-class.png');
}
然而,如果你想让这样的东西能够处理类似的事情,那么你需要更多的逻辑、决策以及 LESS 中的一些 JavaScript 编码div#menu ul li
实际生成的文件名类似于div-menu-ul-li.png
.
尽管如此...
可以这样做:
LESS
.buildSelectorConnection(@selectorName, @pre: ~'', @post: ~'') {
@{pre}@{selectorName}@{post} {
background-image: url('images/@{selectorName}.png');
}
}
.buildSelectorConnection(menu, ~'div#', ~' ul li');
CSS输出
div#menu ul li {
background-image: url('images/menu.png');
}
这基本上允许您构建任何选择器字符串,但文件名本身只是传入的初始选择器,它需要是对文件名有效的东西。