css - 如何动态生成整个类并使用 LESS 将其连接到其父选择器

Question

到目前为止，我有这个（少语言）：

少：

.test(@name) {
    (~".sm-@{name}") {
        background: ~"url(../images/icons/sm/@{name}-16x16.png)";
    }
}

我可以调用它 ( .test("facebook")) 来生成类似这样的东西：

CSS：

.sm-facebook {
    background: url(../images/icons/sm/facebook-16x16.png);
}

但是，我无法使用通常的&运算符将此生成的类定义连接到父选择器。我希望

少：

ul {
    li {
        &.test("facebook");
    }
}

生成

CSS：

ul li.sm-facebook {
    background: url(../images/icons/sm/facebook-16x16.png);
}

但我收到一个解析错误。

我怎样才能做到这一点？

Answer 1

A LESS 1.4 答案

在最初回答时，我还没有解决在 LESS 1.3.3 中是否有办法做到这一点（但后来做了，请参阅下面的更新）。我发现当前的 LESS 1.4 (beta) 可以通过以这种方式将连接放在 mixin 本身中来实现它（注意参数中缺少引号）：

较少的

.test(@name) {
    &.sm-@{name} {
        background: ~"url(../images/icons/sm/@{name}-16x16.png)";
    }
}

ul{
  li {
    .test(facebook);
  }
}

CSS 输出

ul li.sm-facebook {
  background: url(../images/icons/sm/facebook-16x16.png);
}

如果您需要灵活地连接或不连接，您可以像这样进行嵌套混合（默认为附加）：

.test(@name, @attach: 1) {
    .attach(1) {
      &.sm-@{name} {
        background: ~"url(../images/icons/sm/@{name}-16x16.png)";
      }
    }
    .attach(0) {
      .sm-@{name} {
        background: ~"url(../images/icons/sm/@{name}-16x16.png)";
      }
    }
   .attach(@attach);
}

然后像这样使用它.test(facebook);来连接，并将.test(facebook, 0);其作为子（或独立）类分开。

更新：更少的 1.3.1 到 1.3.3 答案

首先更改名称，以便字符串评估与类名分配分开。上面关于灵活性的其他观点也可用于此答案。

.test(@name) {
  @addName: ~"sm-@{name}";
  &.@{addName} {
        background: ~"url(../images/icons/sm/@{name}-16x16.png)";
    }
}