出力に必要なものは次のとおりです。
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}
、関数呼び出しを 1 レベル上に配置しました。しかし、それらをネストするのはまだ非常にクールです!