LESS で calc を使う場合の注意点

phi phi on less

問題

CSS3 の calc() を LESS で使うと, コンパイル時に計算されちゃって意図しない値になってしまうことがあります.

height: calc(100vh - 36px);  

↓コンパイル後

height: calc(64vh);  

解決方法

この問題は, 計算式をエスケープさせることで回避できます.

height: calc(~'100vh - 36px');  

↓コンパイル後

height: calc(100vh - 36px);  

Reference

css - Less Aggressive Compilation with CSS3 calc - Stack Overflow