ミックスインをセレクター文字列として定義することはできないため& .width()
、ネストされた部分をミックスイン定義にすることはできません (これは、作成しようとしたものです)。
あなたがやろうとしているのは.width()
、特定の要素で使用する汎用 mixin を作成することだと思います。に 1 つの数値を設定するだけのようですがpadding
、これで問題ありません。
ただし%
、(コメントに基づいて)このコードが親の値を引いた値width
をしているようにも見えます。パーセンテージも使用していると仮定すると、これも問題ありません。そうではなく、代わりに がピクセル値であることを意図している場合、LESS はプリプロセッサであるため、期待どおりに混合単位を LESS で実行することはできません。親は、実行時のパーセントに基づいて、ピクセル値を減算します。100%
padding
padding
padding
width
padding
ここで、目的がパーセンテージであるか、 と の両方に等しい 測定値である場合(両方、 両方 の単位など)、さまざまな方法で目的のものを得ることができます。多くの解決策の 1 つは、ネスト内で mixinをオーバーライドすることです。たとえば、次のようになります。width
padding
px
em
.width()
.lt-ie8
.width(@width: 100%, @paddinglr: 0) {
width: @width;
padding: @paddinglr;
}
body {
.someDiv {
.width(100%, 10%);
}
&.lt-ie8 {
/* here is the override of the mixin */
.width(@width: 100%, @paddinglr: 0) {
/* note, I believe you will want to multiply the padding by 2 for the width change due to left and right padding */
width: @width - (2 * @paddinglr);
padding: @paddinglr;
}
/* and here is the override of the actual css */
.someDiv {
.width(100%, 10%);
}
}
}
これにより、次の CSS が生成されます (上記のコメントを差し引いたものは、あなたに伝えるためだけのものです)。
body .someDiv {
width: 100%;
padding: 10%;
}
body.lt-ie8 .someDiv {
width: 80%;
padding: 10%;
}