SCSSの変数と、CSS3のcalc()を併用するには

SCSSの変数が展開されず文字列としてそのままCSSに出力される問題の解決法です。

こんなSCSSを書いたとするよ。

scss

$var: 300px;
.box {
	width: calc( 100% - $var );
}

コンパイル結果（.css）は、

css

/* これが理想だけど */
.box {
	width: calc( 100% - 300px );
}

/* 現実はこう（`$var`が展開されず、SCSSがCSSとしてそのまま出力される・・） */
.box {
	width: calc( 100% - $var );
}

これをどうすればいいかというと、こうすればいいらしい。

scss

$var: 300px;
.box {
    width: calc( 100% - #{$var} );
}

半角スペースも必要

ちなみに calc() の話ですが、四則演算記号の前後には半角スペースが必要です。
これじゃダメ。

scss

$var: 300px;
.box {
    width: calc( 100%-#{$var} );    // NG
    width: calc( 100% - #{$var} );  // Good
}

おわりに

知らないとそんなことになっているなんて気づきもせずにハマってしまうポイントですね…。