web-dev-qa-db-ja.com

パーセントからピクセルまでの幅を計算し、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()で機能するようにします

csslesspixel
97
l2aelba

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 。

234
natchiketa

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

0
Akshay Khandelwal