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

  • 在 Less 中使用与 Less 内置函数同名的原生 CSS 函数已关闭评论
  • 113 次浏览
  • A+
所属分类:Web前端
摘要

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


参考资料

问题描述

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

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

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

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

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

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

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