Less 4.x中除法不再自动计算，必须用括号包裹（如(100px / 4)）或使用./语法（如100px ./ 4），否则/被视为纯字符，导致CSS输出无效。
除法不再自动计算，必须加括号或用 ./
Less 4.x 把除法行为硬编码为“仅括号内或带 ./ 时才执行”，/ 在外面就是纯字符，不参与运算。这不是 bug，是明确设计——避免 CSS 中 / 被误解析为 font、background 等简写分隔符。
常见错误现象：width: 100px / 4; 编译后原样输出 width: 100px / 4;，浏览器直接忽略该样式，调试时找不到原因。
- ✅ 正确写法一：
width: (100px / 4);—— 推荐，语义清晰，支持单位混合（如(2rem / 2)） - ✅ 正确写法二：
width: 100px ./ 4;—— 注意./前后必须有空格，100px./4会报错 - ❌ 错误写法：
width: 100 / 4px;、width: (100 / 4)px;、line-height: 20px / 16px;
@import 必须显式声明 .less 后缀
v4 默认关闭路径自动补全，@import "mixins" 不再匹配 mixins.less 或 mixins.css，而是按字面路径查找。结果常是变量未定义、ReferenceError: variable is undefined，其实只是文件根本没导入。
使用场景：项目里大量用 ~ 别名引入第三方库样式（比如 Ant Design），但 v5 已移除 .less 源码，@import "~antd/lib/style/themes/default.less" 会直接失败。
- ✅ 必须写全路径：
@import "./variables.less";、@import "~antd/dist/antd.less";（确认该路径真实存在 .less 文件） - ⚠️ 若用
~别名，先ls node_modules/antd/dist/看是否有antd.less；Ant Design v5 仅提供antd.css，不可直接 import .less
颜色和尺寸函数必须带单位
v4 收紧了函数参数校验，lighten(@color, 10%) 可以，但 lighten(@color, 10) 会被拒绝——10 不是合法的百分比值，必须写成 10%。
影响范围包括：fade()、saturate()、percentage()、round()（后者要求输入带单位或明确数字）。
- ✅ 正确：
fade(@primary, 20%)、percentage(0.5)、round(10.4px) - ❌ 错误：
fade(@primary, 20)（缺 %）、percentage(1/2)（未括起的除法，输出1/2字符串） - ⚠️ 注意：
round(10.4)合法，但round(10.4px)输出10px；单位参与运算时，结果保留第一个单位
变量作用域更严格，嵌套中不能隐式访问父级变量
v4 强化了块级作用域规则，.btn { @size: 12px; &-large { font-size: @size; } } 在 v3 中能工作，v4 会报 Variable @size is undefined。
这不是语法错误，是作用域隔离增强——嵌套选择器内部不自动继承上层 @ 变量，除非显式声明或提升作用域。
- ✅ 解决方式一：把变量提至全局或文件顶部
@size: 12px; - ✅ 解决方式二：用
@{}插值绕过作用域限制：&-large { font-size: @{size}; }（前提是@size在外层已定义） - ⚠️ 避免依赖隐式行为：v3 的“能跑”不代表“正确”，v4 暴露的是长期被忽略的作用域漏洞
最易被忽略的点是：这些变化全部发生在编译期，没有运行时兜底。漏一个括号、少一个 %、错一次 @import 路径，都不会报红，而是静默产出无效 CSS —— 最终表现为样式消失、布局错乱，排查成本远高于修改成本。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
