參考資料
- calc() - CSS：層疊樣式表 | MDN
- Getting started - Escaping | Less.js
- Using The CSS Function calc() Inside The LESS CSS Preprocessor
問題描述
在原生 CSS 中有以下的函數(shù)：calc()、max()、min() 等，而在 Less 中也有同名的函數(shù)，使用的時(shí)候可能會(huì)沖突，無法得到需要的結(jié)果。
對(duì)于 calc()，Less 進(jìn)行了處理，不會(huì)對(duì)數(shù)學(xué)表達(dá)式進(jìn)行計(jì)算。
但如果其中包含變量或嵌套的函數(shù)，則會(huì)進(jìn)行計(jì)算。例如 calc() 和 max() 嵌套使用的時(shí)候：
.element {
width: calc(max(var(--min-width), var(--item-width) + var(--offset-width)) * 1px);
}
會(huì)出現(xiàn)以下報(bào)錯(cuò)：
[less] Error evaluating function `max`: Operation on an invalid type
如何解決
這時(shí)可以使用 Less 的轉(zhuǎn)義字符：在字符串前加上一個(gè) ~ 符號(hào)，并將需要轉(zhuǎn)義的字符串放在 "" 或 '' 中。
文章來源：http://www.zghlxwxcb.cn/news/detail-710511.html
.element {
width: ~"calc(max(var(--min-width), var(--item-width) + var(--offset-width)) * 1px)";
}
這樣就可以使用任意的字符串作為屬性或變量值了（當(dāng)然，前提是使用正確的 CSS 語(yǔ)法）。文章來源地址http://www.zghlxwxcb.cn/news/detail-710511.html
到了這里，關(guān)于在 Less 中使用與 Less 內(nèi)置函數(shù)同名的原生 CSS 函數(shù)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
