[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);
}