問題

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