在less中不能正常使用css3的calc屬性的解決方法

calc是css3增加的一個自動計算長度的方法

可以進行不同單位數值之間的四則運算，比如：

.test{
  width: calc(100% - 50px);
}

但是當我們在less中使用這個方法的時候卻出現了問題：

less中寫法：
.test{
  width: calc(100% - 50px)
}

less編譯后：
.test{
  width: 50%;
}

出現這個問題的原因是less的運算方式和calc發送了沖突，要解決這個問題可以這樣設置：

.test{
  width: calc(~"100% - 50px");
}

編譯為
.test{
  width: calc(100% - 50px);
}

 

如果進行數值和變量之間的運算可以這樣設置：

@diss = 50px;

.test{
  width: calc(~"100% - @{diss}")
}

 

結論：

• less中 “~”  符號后面雙引號里面的內容會被less編譯忽略，而直接輸出為css代碼
• less中@和{}配合可以在字符串里面使用變量，很像es6里面的模板字符串 `${}`