css - パーセントからピクセルまでの幅を計算し、LESS CSS でピクセル単位でマイナスする

Question

一部の要素の幅をパーセントからピクセルまで計算するので、LESSとcalc()を使用して -10px を差し引きます。それが可能だ？

div {
    span {
        width:calc(100% - 10px);
    }
}

私はCSS3を使用しcalc()ているため、動作しません:calc(100% - 10px)

例: 100% = 500px の場合、幅 = 490px (500-10);

テスト用のデモを作成しました：http://jsfiddle.net/4DujZ/55/

したがって、パディングは、サイズ変更時に常に5 (10px / 2) と言うでしょう。

LESSでできますか？私はjQueryとマージンパディングなどの単純なCSSで行う方法を知っています...しかし、私はLESSで機能的にやろうとしますcalc()

Answer 1

calcコンパイル時に評価されないようにするために、引数をエスケープできます。

あなたの例を使用すると、次のように引数を囲むだけです。

calc(~'100% - 10px')

デモ: http://jsfiddle.net/c5aq20b6/

---

これを次の3つの方法のいずれかで使用していることがわかります。

基本的なエスケープ

引数内のすべてcalcは文字列として定義され、クライアントによって評価されるまで完全に静的です。

少ない入力

div {
    > span {
        width: calc(~'100% - 10px');
    }
}

CSS出力

div > span {
  width: calc(100% - 10px);
}

変数の補間

LESS 変数を文字列に挿入できます。

少ない入力

div {
    > span {
        @pad: 10px;
        width: calc(~'100% - @{pad}');
    }
}

CSS出力

div > span {
  width: calc(100% - 10px);
}

エスケープされた値とコンパイルされた値の混合

パーセンテージ値をエスケープしたいかもしれませんが、先に進んでコンパイル時に何かを評価してください:

少ない入力

@btnWidth: 40px;
div {
    > span {
        @pad: 10px;
        width: calc(~'(100% - @{pad})' - (@btnWidth * 2));
    }
}

CSS出力

div > span {
  width: calc((100% - 10px) - 80px);
}

ソース: http://lesscss.org/functions/#string-functions-escape。

Answer 2

私width: -moz-calc(25% - 1em);はあなたが探しているものだと思います。さらに支援が必要な場合は、このリンクを参照してください。

Answer 3

または、次のようにマージン属性を使用できます。

    {
    background:#222;
    width:100%;
    height:100px;
    margin-left: 10px;
    margin-right: 10px;
    display:block;
    }

Answer 4

これを試して ：

width:auto;
margin-right:50px;