css にて calc() 内で sass の変数を使う

calc() とは多分 calculate の略。
単位の違う値も計算してくれる。

下記のように calc() 内で sass の変数 ($xxxxx) を扱うと、
変数を文字列と認識してしまい、うまく動かない。

$header: 100px;
$footer: 100px;

.content {
	height: calc(100vh - $header - $footer); // NG
}

変数として扱うには下記のように #{$xxxxx} とする。

.content {
	height: calc(100vh - #{$header} - #{$footer}); // OK
	height: calc(100vh - #{ $header } - #{ $footer }); // OK
	height: calc(100vh-#{$header}-#{$footer}); // NG
	height: calc(100vh -#{$header} -#{$footer}); // NG
}