Less中需自定义单位转换函数，核心是用unit()提取数值、unitless()和isdimension()组合判断类型，基准值设为变量以支持响应式动态切换，拼接单位必须用+号。
Less里怎么写单位转换函数
Less本身不提供内置的单位换算函数（比如px转rem或em），得自己写。核心是用unit()剥离数值、用unitless()判断是否无单位，再结合设计稿基准值做计算。
常见错误是直接对带单位的值做乘除：16px * 0.0625会报错，Less不允许单位混算；或者忘了用unit()把单位抽出来，导致结果带错单位（比如16remrem）。
- 必须先用
unit(@val, "")提取纯数字，再参与运算 - 目标单位要显式拼接，比如
@n + rem，不能靠隐式转换 - 推荐把基准值（如
@base-font-size: 16px）设为变量，方便全局调整
示例：转px为rem的函数
.px2rem(@val) when (isnumber(@val)) and (unitless(@val)) {
@n: unit(@val, "px");
@n / 16 + rem;
}
.px2rem(@val) when (isdimension(@val)) and (unit(@val) = px) {
@n: unit(@val, "px");
@n / 16 + rem;
}为什么unitless()和isdimension()必须配合用
只靠unitless()会漏掉输入16px这种带单位的情况；只靠isdimension()又无法区分16和16px——前者是数字，后者是带单位量纲，Less里类型不同，运算规则也不同。
立即学习“前端免费学习笔记（深入）”；
典型翻车场景：传入16（无单位）时，unit(16, "px")返回16px，不是想要的纯数；传入16px时，unitless(16px)返回false，但unit(16px, "px")才真正拿到16。
-
unitless(@val)只对纯数字返回true，对16px、16em都返回false -
isdimension(@val)对所有带单位的值返回true，但不告诉你单位是什么 - 必须组合判断：先看是不是数字，再看是不是
px单位，再分别处理
响应式适配时，怎么让转换函数自动适配不同断点
不能只写一个固定基准值（比如全用16px），否则在移动端html根字体缩放后，rem计算就失准。得按断点动态切换基准。
常见做法是把基准值做成变量，在媒体查询里重定义，再让转换函数读取当前作用域下的值。Less支持变量作用域链，所以只要在@media块内重新赋值@base-font-size，后续调用.px2rem()就会自动用新值。
- 别在函数内部硬编码
16，一律用变量如@base-font-size - 在
@media里用@base-font-size: 14px;覆盖，而不是新建变量名 - 注意：Less编译时静态解析，所以
@base-font-size必须在调用函数前已定义（哪怕是在同一文件更早位置）
示例：
@base-font-size: 16px;
@media (max-width: 768px) {
@base-font-size: 14px;
.foo { font-size: .px2rem(16); } // 此处用14px为基准
}兼容性与性能要注意什么
Less 3.5+才支持unit()的第二个参数（指定目标单位），老版本只能用unit(@val)抽原始单位，再手动比对。另外，嵌套过深的条件判断会让编译变慢，尤其在大型项目中大量调用转换函数时。
- 避免在循环里反复调用复杂转换函数，可提前算好存成变量
- 如果项目用Webpack+less-loader，确保
less版本≥3.5，否则unit(@val, "px")会报错 - 移动端调试时，Chrome DevTools显示的
rem值是基于当前html实际字号计算的，和Less编译出的数值可能不一致——这是运行时行为，不是Less问题
最易被忽略的是：函数返回值的单位拼接必须用+，不能用空格，@n / 16 rem会被解析成两个token，报语法错误。
