Scss の変数を calc で使う

CSS3 の calc() は、動的な計算ができる便利な関数だ。
一方、Scss (Sass) の変数と計算式では静的な計算しかできない為、これらを組み合わせて使いたい時がある。例えば次のような場合。

  $m: 10px;
  width: calc(100% - ($m * 2));
  margin: 0 $m;

一見これは上手く行きそうだが、CSS の出力結果はこうなってしまう。

  width: calc(100% - ($m * 2));
  margin: 0 10px;

(´・ω・｀)…
そこで、インターポレーションを使って、こうする。

  width: calc(100% - #{$m*2});

結果は、

  width: calc(100% - 20px);

ブラボー！ Scss+calc って素晴らしいですね(｀・ω・´)
もっともこの例だと width: auto; でも良いんですけどね！