Question

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

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

#header{
  .bg;
}

结果：

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

我认为这是不可能的，如果选择器是这样的话会发生什么：

div#menu ul li

这不会真正起作用，但也许任何人都知道另一种选择，这在任何其他预处理器中都是可能的。

谢谢！

Answer 1

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

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

然而，如果你想让这样的东西能够处理像div#menu ul li这样生成实际文件名的东西，你需要更多的逻辑，你的决策和一些javascript编码。就像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');
}

这基本上允许你构建任何选择器字符串，但文件名本身只是传入的初始选择器，它必须是对文件名有效的东西。

Answer 2

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

在此处查看此问题的答案：Does LESS have an "extend" feature?

在LESS mixin中使用选择器名称作为变量

2 个答案:

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

然而...