less - 如何通过 LESS 函数使用 & （AND 选择器）？

Question

这是输出需要的内容：

div.star_mask {
    &.fill-0 {
        width: 0%;
    }
    &.fill-50 {
        width: 50%;
    }
}

我这样做了很多次，所以我做了一个函数来生成它：

#star {
    .star-fill(@width) {
        (~"&.fill-@{width}") {
            div { width: ~"@{width}%" }
        }
    }
}

div.star_mask {
    #star > .star-fill(0)
}

这会生成以下 CSS：

div.star_mask &.fill-0而不是我需要的：div.star_mask.fill-0

那么有没有办法做到这一点？我可以把&函数调用的地方放在哪里吗？

我最终通过自己编写选择器来解决问题：div.star_mask.fill-@{width}并将函数调用置于上一层。不过，嵌套它们仍然很酷！

Answer 1

当 less 遇到 (~"") 作为选择器时，它不会解析内容而是逐字接受它，因此您不能在其中使用 &。

我认为目前还没有一种方法可以完全按照您的意愿行事，但请记住您可以在选择器的末尾使用 & ，例如

.a {
  div& {
    foo:bar;
  }
}

变成

div.a {
  foo: bar;
}

不确定这是否有帮助。