0

出力に必要なものは次のとおりです。

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 レベル上に配置しました。しかし、それらをネストするのはまだ非常にクールです!

4

1 に答える 1

1

セレクターとしてlessが(〜 "")に出くわすと、内容は解析されませんが、逐語的に受け入れられるため、&を使用することはできません。

セレクターの最後で&を使用できることを覚えておいてくださいが、現時点であなたが望むことを正確に行う方法はないと思います。

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

になります

div.a {
  foo: bar;
}

しかし、それが役立つかどうかはわかりません。

于 2012-06-28T06:18:34.170 に答える