前言在早期如果想要對某一些樣式進行動態計算 ， 絕大多數的做法都是使用JavaScript來進行，當時的CSS在面對這種場景顯得有點無能為力 。但是，當CSS3中新增了calc函數時，面對這種場景，JavaScript不再是我們的第一選擇，我們只用 CSS 就可以進行相當復雜的計算了 。在使用calc的過程中，相信大家或多或少都遇到過下面這些“坑” 。
如果這篇文章有幫助到你，?關注+點贊?鼓勵一下作者，文章公眾號首發 ， 關注 前端南玖 第一時間獲取最新文章～
常見的“坑”先來介紹css使用calc無效的兩種常見情況：
運算符之間沒加空格/*錯誤寫法*/div{width: calc(100%-50px);}/*正確寫法*/div{width: calc(100% - 50px);}這里錯誤寫法中-兩邊沒加空格，導致width不生效 。但并不是所有運算符間都需要加空格，只有 + 和 - 需要加空格 ， 因為運算允許負數的出現，如：
div{width: calc(100% + -50px);}所以 ， 為了統一，建議所有運算符都加上空格，防止記憶混淆 。
運算值沒帶單位我們都知道在寫css時，如果數值為0我們一般會省略它的單位，比如：0px我們一般會直接寫成0 。但是在calc()函數中如果0不帶單位 ， 也會導致不生效 。
/*錯誤寫法*/div{width: calc(0 + 100px);}/*正確寫法*/div{width: calc(0px + 100px);}這里上面的不帶單位的寫法也是不生效的 。這里我相信很多人都會有疑問，為什么0還需要帶個單位？
這是因為calc() 函數傳入的是一個數學表達式，而表達式的值可以有多種類型，如長度、百分比、角度等 。那如果你傳個 0 進去，沒單位的話，怎么知道這個 0 是屬于什么類型？
低版本less處理calc沖突以下代碼在低版本less中會被編譯成你意想不到的結果：
.box {width: calc(100% - 50px)}編譯后：
.box {width: calc(50%)}【為什么CSS中的calc函數可能會不生效？】導致這個結果的原因在于less中有一套自己的運算規則：
less運算（Operations）算術運算符 +、-、*、/ 可以對任何數字、顏色或變量進行運算 。如果可能的話，算術運算符在加、減或比較之前會進行單位換算 。計算的結果以最左側操作數的單位類型為準 。如果單位換算無效或失去意義，則忽略單位 。無效的單位換算例如：px 到 cm 或 rad 到 % 的轉換 。
// 所有操作數被轉換成相同的單位@conversion-1: 5cm + 10mm; // 結果是 6cm@conversion-2: 2 - 3cm - 5mm; // 結果是 -1.5cm// conversion is impossible@incompatible-units: 2 + 5px - 3cm; // 結果是 4px// example with variables@base: 5%;@filler: @base * 2; // 結果是 10%@other: @base + @filler; // 結果是 15%乘法和除法不作轉換 。因為這兩種運算在大多數情況下都沒有意義，一個長度乘以一個長度就得到一個區域，而 CSS 是不支持指定區域的 。Less 將按數字的原樣進行操作，并將為計算結果指定明確的單位類型 。
所以上面的less會被進行如下處理：
- 由于100%與50px單位不同，會被轉換成相同的單位%（以最左側操作數的單位類型為準）
- 再進行減法運算得到50%
- 轉義
轉義（Escaping）允許你使用任意字符串作為屬性或變量值 。任何我們希望less不要幫我們處理，所以這里我們可以使用less的轉義語法讓~"anything"或~'anything'形式的內容都將按原樣輸出 ， 除非 interpolation 。
calc函數原樣輸出就好了.box {width: calc(~"100% - 50px")}- 升級
less和less-loader
CSS calc 函數用于在指定 CSS 屬性值時執行計算 。它可以用于可以使用任何數值的地方 。它將表達式作為參數，并將結果用作使用它的 CSS 屬性的值 。我們可以用它進行加法語法+、減法-、乘法*和除法/。
/* property: calc(expression) */width: calc(100% - 80px);calc() 函數用一個表達式作為它的參數，用這個表達式的結果作為值 。這個表達式可以是任何如下操作符的組合，采用標準操作符處理法則的簡單表達式 。
