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');
}

我认为越少越好，我的代码是错误的还是编译不正确

有没有其他方法可以满足我的要求

---

谢谢

正如Harry所说，您不能扩展动态生成的选择器，并将为您提供一些解决方案

或者，您可以尝试更改HTML并使用两个类：

.pl logo、#pl logo

基类和

测试*

样式类：

< class="pl-logo test2">

上述内容编译成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，请参见：）

或者，当无法更改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');
        }
    }
}

---

这是一种已知的行为。请参阅。。我会尽量少做改动。谢谢你的帖子！因为主要的问题似乎是：“有没有其他方法来做我想做的事情？”我认为@Harry正确地指出了这一点，但我想知道这个问题是否真的是一个重复的问题（很好的替代建议：）

    [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');
        }
    }
}