[CSS3]calc()をつかって単位が異なる値を計算する

単位が異なる値同士で計算(たとえば100% – 170px)をすると通常はエラーになってしまいます。
しかし、CSS3で登場したcalc()を使用すると可能になります。使い方は以下です。

CSS3

/* % - px */
#sample1 {
  width: calc(100% - 170px);
}
/* % - em */
#sample2 {
  width: calc(100% - 1em);
}

これだけです。
従来のやり方ではjavascriptなどを使ってpxを取得して計算するしかありませんでしたが、
このやり方なら誰にでも簡単に指定することが出来ますね。
サンプルでは横幅の計算に使いましたが、色々実験したところ高さを計算したいときは従来通りjsを使ったほうが正確だと思いました。
実際にはベンダープレフィックスをつけて使います。

Sass

Sassにはcalc()のmixinがありませんが、以下のように設定することで利用できます。
参考


//mixin @mixin calc($property, $expression) { #{$property}: -moz-calc(#{$expression}); #{$property}: -o-calc(#{$expression}); #{$property}: -webkit-calc(#{$expression}); #{$property}: calc(#{$expression}); } //使うときの例 #sample3 { @include calc(width, "100% - 10rem"); } //結果 #sample3 { -moz-width: calc(100% - 10rem); -o-width: calc(100% - 10rem); -webkit-width: calc(100% - 10rem); width: calc(100% - 10rem); }