SCSSでcalc（計算）を使う方法

先日SCSSを使っていたら数値の計算でエラーが発生して一人でハマってました。

そこで解決方法を見つけたので、メモがてらブログ記事にまとめました。

変数を使った場合

SCSSでの書き方

$var: 20%;
.contents {
  margin-right: calc(100%-#{$var});
}

CSSでの出力結果

.contents {
  margin-right: calc(100%-20%);
}

変数を使わない場合

SCSSでの書き方

.contents {
  margin-right: calc(100%-#{20%});
}

CSSでの出力結果

.contents {
  margin-right: calc(100%-20%);
}

calcを使わない場合

SCSSでの書き方

.contents {
  margin-right: 100%-#{20%};
}

CSSでの出力結果

.contents {
  margin-right: 100%-20%;
}

以上がSCSS環境で計算させる方法になります。