Less 编译后 CSS 错乱源于三大问题：原生函数被误解析需用~""转义；BOM/换行符/零宽字符透传导致乱码，须保存为UTF-8无BOM并清理控制字符；@import .css 文件会触发词法错误，应改用(import css)修饰符或构建配置引入。
Less 编译后 CSS 错乱，不是语法写错了，而是编译器在几个关键环节“误判”或“漏控”：它把 CSS 原生函数当自己语法解析、把中文/换行符/BOM 当非法字符截断、把 @import 的 .css 文件当 Less 源码硬啃——结果不是报错，就是输出不可读、不可用的 CSS。
为什么 calc() / linear-gradient() 编译后变成无效值？
Less 默认对括号内内容做表达式求值，calc(100% - 20px) 被当成减法运算，linear-gradient(45deg, #f00, #00f) 的逗号被当参数分隔符，最终输出错乱甚至崩溃。
- 所有 CSS 原生函数必须用
~""显式转义：width: ~"calc(100% - 20px)"; - 含变量时，变量需用
@{var}插入引号内：@gap: 24px; width: ~"calc(100% - @{gap})"; -
grid-area: 2/2/3/3同理要转义：grid-area: ~"2/2/3/3";，否则/被当除法 - 别写
calc(100% - @gap)或linear-gradient() + @color—— Less 不支持这种混合解析
为什么编译后 CSS 出现乱码或空行错位？
根本不是 Less “格式化失败”，而是它完全不处理编码和空白：源文件带 BOM、换行符混用（CRLF/LF）、零宽空格（U+200B）藏在注释里，都会直接透传到输出中，导致浏览器解析失败或工具链报错。
- 用 VS Code 开启 “显示控制字符”，全局搜索并替换
[\u200B-\u200D\uFEFF\u00AD] - 保存 .less 文件时选 UTF-8 without BOM（不是 “UTF-8 with BOM”）
- 命令行编译别用重定向：
lessc input.less > output.css可能丢编码；改用 Node.js 脚本，fs.writeFile('output.css', css, 'utf8') - @import 行末禁止加注释：
@import "mixins.less"; /* 工具类 */→ 必须拆成独占一行
为什么 @import ".css" 报 Unexpected character '@'？
Less 编译器看到 @import "xxx.css" 就默认去读取并解析该文件内容，但 .css 不是 Less 语法，开头的 @charset 或 @media 直接触发词法错误。
立即学习“前端免费学习笔记（深入）”；
- 优先走构建配置：Angular 项目把 .css 加进
angular.json的styles数组，不走 Less 解析 - 非得在 .less 里引入？必须加
(css)修饰符：@import (css) "lib.css";或@import (css) url("lib.css"); - 路径统一用正斜杠：
@import (css) "node_modules/foo/dist/style.css";，Windows 下也别用反斜杠 - Webpack 中若用
less-loader，确保没漏配lessOptions: { javascriptEnabled: true }（部分旧版需要）
为什么样式生成了但内容缺失或顺序异常？
表面是“编译成功”，实则是循环依赖或作用域污染：A.less 引 B.less，B.less 又引用 A.less 定义的 mixin，Less 不建依赖图，只线性展开，最终变量未定义、样式漏出、甚至堆溢出卡死。
- 立刻检查
npx lessc --version，less <= 3.9.0有严重 AST 内存泄漏，升级到^4.2.0 - 临时把所有
@import (reference)改成普通@import，让缺失变量立刻暴露为Variable @xxx is undefined - 所有 token（颜色、间距、断点）必须收敛到一个
tokens.less，且它是整个项目第一个被@import的文件 - 避免跨层互引：typography.less 和 spacing.less 互相
@import？删掉，全从tokens.less读
真正难的不是写对某一行 Less，而是让整个编译链路对齐：编码、路径、注释位置、@import 类型、循环边界——任何一环松动，CSS 就会在某个环境、某个构建节点上突然错乱，而且不报明确错误。
