141
Help us understand the problem. What are the problem?

posted at

updated at

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

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

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

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

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

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

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

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

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

半角スペースも必要

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

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

おわりに

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

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
141
Help us understand the problem. What are the problem?