到目前为止,我有这个(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);
- }
但是,我无法使用通常的& amp;将这个生成的类定义连接到父选择器.操作符.我期待
减:
- ul {
- li {
- &.test("facebook");
- }
- }
CSS:
- ul li.sm-facebook {
- background: url(../images/icons/sm/facebook-16x16.png);
- }
但我得到一个解析错误.
我怎样才能做到这一点?
解决方法
少了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)";
- }
- }