在 Less 中使用與 Less 內置函數同名的原生 CSS 函數

參考資料

• calc() - CSS：層疊樣式表 | MDN
• Getting started - Escaping | Less.js
• Using The CSS Function calc() Inside The LESS CSS Preprocessor

問題描述

在原生 CSS 中有以下的函數：calc()、max()、min() 等，而在 Less 中也有同名的函數，使用的時候可能會衝突，無法得到需要的結果。

對於 calc()，Less 進行了處理，不會對數學表達式進行計算。

但如果其中包含變數或嵌套的函數，則會進行計算。例如 calc() 和 max() 嵌套使用的時候：

.element {
  width: calc(max(var(--min-width), var(--item-width) + var(--offset-width)) * 1px);
}

會出現以下報錯：

[less] Error evaluating function `max`: Operation on an invalid type

如何解決

這時可以使用 Less 的轉義字元：在字元串前加上一個 ~ 符號，並將需要轉義的字元串放在 "" 或 '' 中。

.element {
  width: ~"calc(max(var(--min-width), var(--item-width) + var(--offset-width)) * 1px)";
}

這樣就可以使用任意的字元串作為屬性或變數值了（當然，前提是使用正確的 CSS 語法）。