CSSの中で数学をすることは可能ですか？

Question

私はjquery accorion id #accordionと、ヘッダクラス名.simpleColorのコンテンツの一部を持っています。今度は、計算された余白を.simpleColorに渡したいと思います。擬似では...それはこのような何か、

.simpleClass { 
    margin-left: ((#accordion.width/2) - (.simpleColor.width/2)); 
} 

私はそれが可能である場合は、これを達成するためにJavaScriptなどの他の技術を使用して開いているように見えます。

Answer 1

かなり良いサポートを得るために始めているcalcと呼ばれるCSS機能がありますでそれを行うだろう。構文は以下のように動作します：

width: calc(50% - 100px); 

これは、CSSでの真の動的な計算をサポートすることができます

（事業者の周りの空白が重要であることに注意してください）。プリプロセッサでは、静的な長さと静的な長さ、相対的な長さと相対的な長さを組み合わせることしかできません。

Calcは、Chrome 19、Firefox 4、およびIE 9以降でサポートされています。この機能は幅広く使用するには十分に広くサポートされていませんが、将来にはあまり遠く及ばないでしょう。これは覚えてお待ちしております。

Answer 2

あなたが他の技術を使用してに開放している場合は、以下を使用してみてください：http://lesscss.org/

Answer 3

jQuery('.simpleClass').css('margin-left', (jQuery('#accordian').width()/2) - (jQuery('.simpleColor').width()/2) + 'px'); 

あなたが欠けている何をすべき。しかし、あなたはjavascriptでこれを行う必要があります。#accordianと.simpleColorの幅があらかじめわかっていなければ（したがって事前に計算されていない限り）、純粋なCSSで行うことはできません。

Answer 4

CSS内で数学演算をネイティブに行うことはできません。 JavaScriptを使用してページの読み込み時にCSSのプロパティを変更することはできますが、これは苦痛であり、ページが読み込まれるたびにページを遅くする必要があります。

LESS,Stylus、またはSASSのようなCSSプリプロセッサを使用する必要があります。

これらの言語のいずれかを使用すると、実際のCSSスタイルシートを生成できるという利点があります。また、機能、ミックスイン、変数などのメリットも得られます。

Answer 5

私はCSSが純粋なスタイル定義であると信じています。私はそれといくつかの計算を混在させたくない。私は私のjavascriptの

var accWidth=parseInt($("#accordion").css("width").replace("px","")); 
var simpWidth=parseInt($(".simpleColor").css("width").replace("px","")); 
var marginLeft=((accWidth/2)-(simpWidth/2));  
$(".simpleClass").css("margin-left",marginLeft); 

ワーキングサンプルhttp://jsfiddle.net/mzTRw/19/

Answer 6

この例を参照してください。彼はCSSで多くの数学を使用しています。

http://codepen.io/schoenwaldnils/pen/DLiyr