less 4.x 移除裸露 / 数学解析、强制 .less 后缀导入、强化块级作用域、要求颜色/数学函数带单位，升级需检查括号、路径、变量作用域及函数参数。

除法写法不加括号会导致样式静默失效

Less 4.x 彻底移除了对裸露 / 的数学解析，width: 100px / 4; 不再计算成 25px，而是原样输出为非法 CSS —— 浏览器直接丢弃整行（DevTools 中显示灰色删除线），且不报错、不中断构建。

必须显式加括号或改用 ./：

• (100px / 4)（推荐，语义清晰）
• 100px ./ 4（注意 ./ 前后必须有空格）
• line-height: 20px / 16px; → 必须写成 line-height: (20px / 16px);
• @gap: 1rem / 2; → 会变成字符串 "1rem / 2"，后续所有引用全崩

@import 必须带 .less 后缀且路径严格匹配

Less 4.x 关闭了路径推测机制：@import "mixins" 不再尝试匹配 mixins.less 或 mixins.css，而是按字面路径查找，找不到就报 ReferenceError: variable is undefined。

实操要点：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• @import "./variables"; → 错误
• @import "./variables.less"; → 正确
• @import "~antd/dist/antd.less"; → 先确认该路径真实存在（Ant Design v5 已移除所有 .less 源码）
• 第三方 CSS 文件建议用 @import (inline) "xxx.css"; 原样保留，避免解析失败

嵌套作用域中无法访问父级 @ 变量

Less 4.x 强化块级作用域，&-large { font-size: @size; } 这类写法会直接报 Variable is undefined，不是警告，是编译失败。

两种安全解法：

• 把变量提至文件顶层：@size: 12px; 放在最开头
• 在嵌套块内重新声明：&-large { @size: 12px; font-size: @size; }
• 避免依赖“就近定义”习惯，尤其在迁移老项目时，需逐层检查嵌套层级中的变量引用

颜色/数学函数参数必须带单位或百分比

Less 4.x 移除了隐式单位推断，lighten(@color, 10) 或 percentage(1/2) 全部报错，且错误信息直指类型不合法。

正确写法：

• lighten(@color, 10%)（百分比必须带 %）
• percentage((1/2)) 或 percentage(0.5)（先算数值再传入）
• round(10.4px) → 返回 10px；round(10.4) → 返回纯数字 10，无单位，后续参与计算易出错

真正难排查的是那些不报错却让样式消失的地方：一个漏掉的括号、一行错位的注释、一个没加单位的函数调用——它们不会打断 CI，但上线后用户就看不到正确样式。升级前务必用 lessc --version 确认团队统一使用 Less 4.x，并禁用 javascriptEnabled: true 这类危险遗留选项。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！