8

我正在尝试在 LESS 中创建一个 mixin,它将使用它的选择器名称作为混合中的变量。mixin 应该看起来像这样,但我找不到它的确切语法,或者它是否可能:

.bg{
 background-image: url('images/@{SELECTORNAME}.png');
}

#header{
  .bg;
}

结果是:

#header{
    background-image: url('images/header.png');
}

我认为这是不可能的,加上如果选择器是这样的会发生什么:

div#menu ul li

这不会真正起作用,但也许有人知道替代方案,无论这在任何其他预处理器中都是可能的。

谢谢!

4

2 回答 2

17

您无法“读取”选择器名称。

但是,您可以构建选择器以与 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');
}

这基本上可以让您构建任何选择器字符串,但文件名本身只是传入的初始选择器,它需要对文件名有效。

于 2013-06-21T13:47:06.767 回答
0

是的,LESS 刚刚在 1.4.0 中引入了一个扩展功能。

在此处查看此问题的答案:LESS 是否具有“扩展”功能?

于 2013-06-21T12:56:10.843 回答