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

Question

到目前为止我有这个(LESS语言):

少:

.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

少了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);
}

如果你需要灵活性来连接或不连接,你可以像这样做一个嵌套的mixin(这个默认为attach):

.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)";
    }
}