如何使用＆amp; （AND选择器）通过LESS功能？

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较少（〜“”）作为选择器时，它不解析内容但是逐字接受，所以你不能使用＆amp;在它。

我认为现在没有办法完全按照自己的意愿行事，但请记住，你可以使用＆amp;在选择器的末尾，例如

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

变为

div.a {
  foo: bar;
}

不确定是否有帮助。