less 4.x 不支持 env() 函数，会静默忽略并删除该函数及其内容；需用插值 @{'env(...)'} 原样输出至 css，否则导致样式失效或 css 语法错误。
Less 4.x 中没有 env() 函数，它根本不会被编译，也不会报错——只会静默忽略。 这是很多人在迁移旧项目或查阅文档时踩的第一个坑：把 CSS 原生的 env() 当作 Less 内置函数来用，结果变量不生效、样式丢失，还查不出原因。
为什么 env() 在 Less 里完全无效
Less 是一门 CSS 预处理器，所有函数（如 fade()、lighten()）都在编译期执行，而 env() 是浏览器运行时才解析的 CSS 原生函数，属于 CSS 环境层能力。Less 4.x 的解析器既不识别它，也不做透传处理——它被当作一个未知函数直接丢弃，连括号里的内容都不保留。
- 写
padding: env(safe-area-inset-top);→ 编译后变成padding: ;（空值，CSS 无效） - 写
margin: calc(env(safe-area-inset-bottom) + 8px);→env(...)被删，只剩calc(+ 8px)，浏览器报Invalid CSS - Less 不会警告，也不报错，调试时极难定位
正确写法：原样保留 env() 给浏览器处理
必须绕过 Less 解析，让 env() 字符串原封不动输出到最终 CSS 中。核心思路是：用插值（@{}）或字符串拼接“骗过”解析器，同时确保生成合法 CSS。
- ✅ 推荐方式：用插值包裹，明确告诉 Less “这是纯字符串”
padding: @{'env(safe-area-inset-top)'};→ 输出padding: env(safe-area-inset-top); - ✅ 兼容性更强：加单位保护（避免被误判为数值）
padding-top: @{'env(safe-area-inset-top, 0px)'};（注意：第二个参数是 CSS fallback，由浏览器解析） - ❌ 避免用
~"env(...)";：Less 3.x 支持，但 4.x 已废弃，部分版本会报Deprecated escape syntax
和 var() 混用时的注意事项
如果你同时用 CSS 自定义属性（var(--x)）和环境变量（env(safe-area-inset-top)），别指望 Less 帮你合并或计算——它们都得原样保留。
- ❌ 错误：
padding: calc(var(--base) + env(safe-area-inset-top));→env被删，剩下非法 calc 表达式 - ✅ 正确：全部插值化，且确保括号匹配
padding: calc(@{'var(--base)'} + @{'env(safe-area-inset-top, 0px)'}); - ⚠️ 注意：Less 不验证 CSS 语法，所以拼错括号（比如少个
)）会导致输出非法 CSS，浏览器静默忽略整条声明
真正麻烦的不是怎么写，而是排查——当页面顶部留白异常时，得想到去检查编译后的 CSS 文件里有没有 env( 字样；如果没了，八成是 Less 把它吞了。别信编辑器高亮，它可能把 env() 当作普通函数标蓝，但实际编译器根本不认。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
