CSS
Sass
scss

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

More than 1 year has passed since last update.

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

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

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

コンパイル結果は、

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

/* 現実はこう(`$var`が展開されず、そのまま出力されちゃう・・) */
.box {
    width: calc( 100% - $var );
}

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

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

半角スペースも必要

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

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

おわりに

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