以下是输出需要的内容:
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}
并将函数调用放在上面一级。虽然嵌套它们仍然很酷!
答案 0 :(得分:1)
当less较少(〜“”)作为选择器时,它不解析内容但是逐字接受,所以你不能使用&在它。
我认为现在没有办法完全按照自己的意愿行事,但请记住,你可以使用&在选择器的末尾,例如
.a {
div& {
foo:bar;
}
}
变为
div.a {
foo: bar;
}
不确定是否有帮助。