calc()というもので、CSSで計算させることができるようになってたらしい。
sassとか使うわけじゃなく、ナチュラルなcssです。
たとえば、以下のようにすると、
#main{
width: calc(1000px - 10px);
}
とすると、#mainのwidthは990pxになります。
chromeではまだプレフィックスが必要のようなのでつけておきます。
#main{
width: calc(1000px - 10px);
width: -webkit-calc(1000px - 10px);
}
「こんなもん使い所あんの?」
って感じなんだけど、calcの凄いところは単位が違っても計算できるってところ。
なのでたとえば、%に対してpxの計算をするっていう使い道もでてくる。
#main{
width: calc(80% - 10px);
}
こりゃあ確かにcalc使わないとできないで。
ちなみに、cssで指定できる単位はこれだけあるらしい。
%
em
ex
ch
rem
vw
vh
vmin
cm
mm
in
px
pt
pc
こんなに使わねーー!
コメント
[…] この記事でcssで扱える単位を調べた時にでてきたvw,vh,vminという単位。 […]