连接选择器 (&-) 的较少扩展功能不起作用答案

【问题标题】：Less extend function with concateneted selector (&-) not working连接选择器 (&-) 的较少扩展功能不起作用
【发布时间】：2015-05-05 22:20:38
【问题描述】：

我想用 LESS 做一些事情，但它没有按我的意愿工作。我有这个代码：

.pl, #pl {
    &-logo {
        max-width: 100%;
        height: auto;

        &-test1:extend(.pl-logo) {
          background-image: url('url');
        }

        &-test2:extend(.pl-logo) {
          background-image: url('url');
        }

        &-test3:extend(.pl-logo) {
          background-image: url('url');
        }
    }
}

但它不起作用，我只有：

.pl-logo, #pl-logo {
    max-width: 100%;
    height: auto;
}

.pl-logo-test1, #pl-logo-test1 {
    background-image: url('url');
}

.pl-logo-test2, #pl-logo-test2 {
     background-image: url('url');
 }

.pl-logo-test3, #pl-logo-test3 {
   background-image: url('url');
}

改为：

.pl-logo, .pl-logo-test1, .pl-logo-test2, .pl-logo-test3, #pl-logo {
    max-width: 100%;
    height: auto;
}

.pl-logo-test1, #pl-logo-test1 {
    background-image: url('url');
}

.pl-logo-test2, #pl-logo-test2 {
     background-image: url('url');
 }

.pl-logo-test3, #pl-logo-test3 {
   background-image: url('url');
}

我认为 LESS 更具进化性，是我的代码错误还是 LESS 无法正确编译？

还有其他方法可以做我想做的事吗？

谢谢

【问题讨论】：

这是一种已知行为。请参考this thread。
嗯.. 我会关注 LESS 的变化。谢谢你的线程！
因为主要问题似乎是：“还有其他方法可以做我想做的事吗？”我认为@Harry 正确指向stackoverflow.com/questions/24879871/…，但我想知道这个问题是否也是一个真正的重复

标签： less extend

【解决方案1】：

Harry 已经明确表示，您不能扩展动态形成的选择器，How do I extend a class/mixin which has dynamically formed selector 将为您提供一些解决方案。

或者，您可以尝试更改您的 HTML 并使用 .pl-logo, #pl-logo 基类和 test* 样式类这两个类：

< class="pl-logo test2">

现在您可以使用以下 Less 代码：

.pl, #pl {
    &-logo {
        max-width: 100%;
        height: auto;

        &.test1 {
          background-image: url('url');
        }

        &.test2 {
          background-image: url('url');
        }

        &.test3 {
          background-image: url('url');
        }
    }
}

上面的Th编译成CSS如下：

.pl-logo,
#pl-logo {
  max-width: 100%;
  height: auto;
}
.pl-logo.test1,
#pl-logo.test1 {
  background-image: url('url');
}
.pl-logo.test2,
#pl-logo.test2 {
  background-image: url('url');
}
.pl-logo.test3,
#pl-logo.test3 {
  background-image: url('url');
}

在上面的.pl-logo.test1 意味着同时拥有pl-logo 和test1 类。（#pl-logo.test1 具有 id=pl-logo 和 class=test1，请参阅：How to combine class and ID in CSS selector?）

或者当你不能改变你的 HTML 使用属性选择器时：

    [class^="pl-logo-"], [class*=" pl-logo-"], [id^="pl-logo-"], [id*=" pl-logo-"] {
                max-width: 100%;
                height: auto;
        }
.pl, #pl {
    &-logo {
        &.test1 {
          background-image: url('url');
        }

        &.test2 {
          background-image: url('url');
        }

        &.test3 {
          background-image: url('url');
        }
    }
}

【讨论】：

不错的替代建议 :)