Css 如何动态生成整个类并使用较少的

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

更少：

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

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

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

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

我可以调用它（

.test（“facebook”）

）来生成如下内容：

CSS：

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

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

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

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

但是，我无法使用常用的

&

运算符将生成的类定义连接到父选择器。我希望

更少：

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

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

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

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

产生

CSS：

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

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

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

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

但是我得到了一个解析错误

我怎样才能做到这一点？

答案不到1.4 在最初回答时，我还没有确定在LESS 1.3.3中是否有这样做的方法（但后来有了，请参阅下面的更新）。我发现当前的Less1.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（facebook）

连接，这是

测试（facebook，0）

将其作为子类（或独立类）分隔

更新：答案从1.3.1到1.3.3 首先更改名称，以便字符串计算与类名分配分开。上述关于灵活性的其他观点也可用于此答案

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

---

1.3.3的最后一个解决方案非常有效！我刚刚更新了我的问题，因为我忘了在字符串前面放一个

~

来转义分隔符；也许你应该相应地更新你的答案。再次感谢你。啊，是的，我在测试中也错过了。更新。