Edited at

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

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


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


scss

$var: 300px;

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


コンパイル結果(.css)は、


css

/* これが理想だけど */

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

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



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


scss

$var: 300px;

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


半角スペースも必要

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

これは calc() の話。


scss

$var: 300px;

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


おわりに

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

(SCSSと全く関係ないんですけど、上記の例のように可変幅と固定幅を横に並べたいなんてときは、ぜひ Flexbox をご利用下さい!)