带有串联选择器 (&-) 的较少扩展功能不起作用

Question

我想用 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 无法正确编译？

还有其他方法可以实现我想要的功能吗？

谢谢

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

上面的内容编译成 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');
        }
    }
}