LESS CSSでパーセントからピクセルへ、次にピクセルでマイナスへ幅を計算する

一部の要素の幅をパーセントからピクセルまで計算するため、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()

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

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

calc(~'100% - 10px')

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

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

基本的なエスケープ

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

LESS入力

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

CSS出力

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

変数の補間

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

LESS入力

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

CSS出力

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

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

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

LESS入力

@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。

width: -moz-calc(25% - 1em);あなたが探しているものだと思います。そして、あなたはこのリンクにさらなる援助を探すことを望むかもしれません

または、次のようにmargin属性を使用することもできます。

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

これを試して ：

width:auto;
margin-right:50px;