将LESS文件导入作用域会产生错误的选择器顺序

Question

我想将LESS文件的内容包装到范围中。最新版本的LESS支持这一点，但生成的CSS中的某些选择器超出了预期的顺序。我发现站在表达结尾的父选择器导致了这个问题。

第三-party.less

.mixin() {
    .container > & {
        position: absolute;
    }
}
.class1 {
    width: 200px;
}
.class2 {
    .mixin();
}

wrapped.less

.wrapper {
    @import "3rd-party.less";
}

构建 wrapped.less 会生成以下CSS：

.wrapper .class1 {
  width: 200px;
}
.container > .wrapper .class2 {
  position: absolute;
}

虽然我想得到这个：

.wrapper .class1 {
  width: 200px;
}
.wrapper .container > .class2 {
  position: absolute;
}

是否可以在不修改的情况下获得所需的结果 的第三-party.less

Answer 1

我通过构建 3rd-party.less 并导入结果来实现正确的选择器顺序：

.wrapper {
    @import (less) "3rd-party.css";
}

此解决方案生成一个中间文件，但最终输出完全符合预期。