Sassの変数をcalc()で使用する

Sassの変数に入れた値をcalc()で使用する際に少し詰まったので、使用方法をメモ。

サンプルコード

以下のように余白を変数に格納して、calc()内で使用したとします。

$mg: 20px;
.contents {
  margin: 0 $mg;
  width: calc(100% - ($mg * 2));
}

これをコンパイルすると、以下のように変数と演算部分がそのまま出力されました。

.contents {
  margin: 0 20px;
  width: calc(100% - ($mg * 2));
}

#{変数名}のように記述すると変数の内容を出力できるようです。
今回は演算後の内容でコンパイルしたいので、#{$mg * 2}の形にしてみます。

$mg: 20px;
.contents {
  margin: 0 $mg;
  width: calc(100% - #{$mg * 2});
}

コンパイルすると、変数部分が演算された状態で出力することができました。

.contents {
  margin: 0 20px;
  width: calc(100% - 40px);
}