calc()在less中編譯報錯

calc()對大家來說，或許很陌生，不太會相信calc()是css中的部分。因為看其外表像個函數，既然是函數為何又出現在CSS中呢？

calc() 函數用於動態計算長度值。

• 需要注意的是，運算符前后都需要保留一個空格，例如：width: calc(100% - 10px)；
• 任何長度值都可以使用calc()函數進行計算；
• calc()函數支持 "+", "-", "*", "/" 運算；
• calc()函數使用標准的數學運算優先級規則；

 

問題

width: calc(100vh - 50px);
// 編譯后
width: calc(50vh);

注：當時我就郁悶了，怎么會產生這樣的現象呢？后來各種查，是由於less的計算方式跟calc方法有重疊，兩者在一起有沖突

解決方法

width: calc(~"100vh - 50px");