必须用 calc() 封装 env() 和 constant() 为 Mixin，因 Less 编译期无法解析运行时安全区值；双写确保兼容 iOS 11.0–11.1（constant）与新版（env），偏移量须传入 calc() 内由浏览器计算。
直接用 env() 和 constant() 双写 + calc() 封装成 Mixin，别让 Less 去“算”安全区值——它根本不会运行时解析，硬算只会报错或输出错误 CSS。
为什么不能对 env() 做 Less 运算
Less 是编译期预处理器，env(safe-area-inset-bottom) 在编译时只是个字符串，不是数值。写 @bottom: env(safe-area-inset-bottom) + 10px 会触发 Less 解析失败（报 Operation on an invalid type），或静默生成非法 CSS（如 padding-bottom: env(safe-area-inset-bottom)px + 10px）。
- 浏览器只在运行时识别
env()，且必须出现在calc()内部才有效 -
~"..."强转字符串看似绕过报错，但会导致单位拼接混乱，比如calc(~"env(safe-area-inset-bottom)" + " + 12px")可能产出空格缺失的非法表达式 - 所有加减、比例、条件逻辑，只要涉及安全区值，必须留在
calc()里由浏览器执行
正确封装 .safe-area() Mixin 的写法
把 env() 和 constant() 当作不可拆解的原子，用参数控制偏移量，用字符串拼接生成合法 calc() 表达式。
- 双写兼容：先写
constant()，再写env()，后者覆盖前者 - 偏移量用参数传入，默认为
0，支持带单位（如12px、1rem） - 每个方向单独封装，避免混用导致覆盖失效（例如
padding-top和padding-bottom不能共用一个声明）
.safe-top(@offset: 0) {
padding-top: constant(safe-area-inset-top);
padding-top: calc(env(safe-area-inset-top) + @offset);
}
.safe-bottom(@offset: 0) {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: calc(env(safe-area-inset-bottom) + @offset);
}
.safe-left(@offset: 0) {
padding-left: constant(safe-area-inset-left);
padding-left: calc(env(safe-area-inset-left) + @offset);
}
.safe-right(@offset: 0) {
padding-right: constant(safe-area-inset-right);
padding-right: calc(env(safe-area-inset-right) + @offset);
}
调用时常见错误与规避方式
Mixin 生效依赖调用位置和参数匹配，出错时样式常“消失”而非报错，极难排查。
立即学习“前端免费学习笔记（深入）”；
- 漏传参数且无默认值 → 整条规则被跳过（Less 静默忽略不匹配的 Mixin 调用）
- 在嵌套选择器内调用，如
.footer { .safe-bottom(12px); }→ 仅作用于.footer自身，若想影响子元素需显式写.footer > *或另起规则 - 用
!important覆盖 Mixin 输出 → 在某个断点下优先级反超，造成“写了没反应”的假象 - 误以为 Mixin 能响应 resize → 它只生成静态 CSS，安全区适配完全依赖浏览器原生媒体查询与
env()运行时行为
真正容易被忽略的是：iOS 11.2+ 已完全弃用 constant()，但它在 Safari 11.0–11.1 中是唯一可用方案；双写顺序一旦颠倒，旧版就彻底失效。不要试图用 Less 判断 UA 或版本做条件编译——编译时根本不知道运行环境，也做不到动态降级。
