0

box-sizing:border-box に対する IE7 のサポートの欠如に対処するために、項目の幅とパディングを調整する次の mixin があります。& .width(@width: 100, @paddinglr: 0) の構文が表示されます

これには%が欠けていることに感謝しますが、なぜそれが壊れているのか考えていますか?

.width(@width: 100, @paddinglr: 0) {
  width: @width;
  padding: @paddinglr;
}

body {
&.lt-ie8 {
    & .width(@width: 100, @paddinglr: 0) {
        width: @width-@paddinglr;
        padding: @paddinglr;
    }
  }
}
4

1 に答える 1

3

ミックスインをセレクター文字列として定義することはできないため& .width()、ネストされた部分をミックスイン定義にすることはできません (これは、作成しようとしたものです)。

あなたがやろうとしているのは.width()、特定の要素で使用する汎用 mixin を作成することだと思います。に 1 つの数値を設定するだけのようですがpadding、これで問題ありません。

ただし%、（コメントに基づいて）このコードが親の値を引いた値widthをしているようにも見えます。パーセンテージも使用していると仮定すると、これも問題ありません。そうではなく、代わりに がピクセル値であることを意図している場合、LESS はプリプロセッサであるため、期待どおりに混合単位を LESS で実行することはできません。親は、実行時のパーセントに基づいて、ピクセル値を減算します。100%paddingpaddingpaddingwidthpadding

ここで、目的がパーセンテージであるか、 と の両方に等しい 測定値である場合(両方、 両方 の単位など)、さまざまな方法で目的のものを得ることができます。多くの解決策の 1 つは、ネスト内で mixinをオーバーライドすることです。たとえば、次のようになります。widthpaddingpxem.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%;
}
于 2012-12-20T15:28:45.847 に答える