css - CSS Calc() に代わるものはありますか? LESS または SASS はピクセル計算に対するパーセントを行うことができますか?

Question

calc() を使用せずにパーセントからピクセルへの計算を行う方法をしばらく探していました。calc を使用できるようにしたいのですが、現在モバイル サファリ (ios) は ios6 より前ではサポートしていません。LESSでこれを行う方法はありますか? 計算ができることは知っていますが、私が知る限り、100% - 20px のようなことはできません。助言がありますか？

Answer 1

いいえ。

LESS を初めて発見したとき、私はしばらくこれを探していましたが、残念ながらそれは不可能です。LESS にはレンダリング エンジンが含まれていないため、親要素のパーセンテージの幅を正確に計算する方法がありません。特に、その親要素の幅が可変であることが非常に多いためです。

親が固定幅の場合、もちろん LESS を使用してピクセルを計算できます。

@containerWidth: 500px;
.container {width: @containerWidth;}
.child {width: @containerWidth / 5;}

Answer 2

LESS も SASS も、レンダリング後に計算を行うことはできません。それらが行う計算は、ブラウザーが解釈する最初の CSS ファイルをレンダリングすることです。どちらも 100% 有効な CSS を生成します。CSS で実行できることはすべて、SASS と LESS の両方で出力できます (ただし、通常は冗長性と毛引きが少なくなります)。ただし、CSS でそれを行う方法がない場合は、SASS または LESS で行う方法はありません。

Javascript を使用して回避できる場合があります。

$('some-element').css('margin-left', $('.my-element').width() - 15)