在 Less 中使用与 Less 内置函数同名的原生 CSS 函数

参考资料

问题描述

在原生 CSS 中有以下的函数:calc()max()min() 等,而在 Less 中也有同名的函数,使用的时候可能会冲突,无法得到需要的结果。

对于 calc(),Less 进行了处理,不会对数学表达式进行计算。

image

但如果其中包含变量或嵌套的函数,则会进行计算。例如 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 的转义字符:在字符串前加上一个 ~ 符号,并将需要转义的字符串放在 ""'' 中。

image

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

这样就可以使用任意的字符串作为属性或变量值了(当然,前提是使用正确的 CSS 语法)。

posted @   Frost-ZX  阅读(269)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· .NET10 - 预览版1新功能体验(一)
点击右上角即可分享
微信分享提示