css calc の罠

css calc の罠

久しぶりに HTML いじったら

.class {
	height: calc(100vh-3em*2-0.25em); 
}

みたいなのが動かない。
2値の四則演算しか出来なかったっけ?入れ子にするのか?とか色々悩んだが

結論 演算子の前後には 半角スペース!!

.class {
	height: calc(100vh - 3em * 2 - 0.25em); 
}

半角スペースがないとダメ らしい。
ばかパーサーかよ。めっちゃ悲しくなった。

正しくは + - の前後に空白らしい。
仕様は以下で、

developer.mozilla.org