【 SCSS / Sass 】calc で変数を使用する方法

使い方を時々忘れるのでメモ。

Sassの公式リファレンス - calc(), element(), progid:...(), and expression()に使い方が記載されている。

OKパターン

#{変数}のように括る。

// SCSS
$sidenav-width: 100px;
.bl_sidenav {
  width: $sidenav-width;
}
.bl_main {
  width: calc(100% - #{$sidenav-width});
}

// Sass
$sidenav-width: 100px;
.bl_main
  width: $sidenav-width;
.bl_sidenav
  width: calc(100% - #{$sidenav-width});

NGパターン

calc(100% - $sidenav-width)のように記述すると、$sidenav-width→100pxの変換がされず、widthのスタイルが適用されないので注意。

// SCSS
$sidenav-width: 100px;
.bl_sidenav {
  width: $sidenav-width;
}
.bl_main {
  width: calc(100% - $sidenav-width);
}

// Sass
$sidenav-width: 100px;
.bl_main
  width: $sidenav-width;
.bl_sidenav
  width: calc(100% - $sidenav-width);