您无法“读取”选择器名称。
但是,您可以构建选择器以与 mixin 中的文件名链接,如下所示:
较少的
.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');
}
但是,如果您想让这样的东西能够处理div#menu ul li
生成的实际文件名类似于div-menu-ul-li.png
.
尽管如此...
可以这样做:
较少的
.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');
}
这基本上可以让您构建任何选择器字符串,但文件名本身只是传入的初始选择器,它需要对文件名有效。