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

正如哈利已经明确表示的那样，你无法扩展动态形成的选择器，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');
        }
    }
}

连接选择器（＆amp ;-)不能正常工作的扩展功能较少

1 个答案: