less编译报错多因解析器误判合法css为语法：/被当除法、点号被当选择器、@import未加(css)、&拼接空格错误、零宽字符干扰等，需用~""包裹、转义、规范注释及显示不可见字符排查。
Less 编译报语法错误，绝大多数情况不是你写了非法 CSS，而是 Less 解析器把本该原样输出的内容当作了需要编译的语法——比如把 linear-gradient() 当作函数调用，把 .icon.heart 当作两个类名，或把 var(--x) 当作变量 @--x 查找。
为什么 linear-gradient()、grid-area 里带 / 就报错？
Less 默认把 / 当除法运算符，1fr / 2fr 被算成 0.5，2/2/3/3 被解析成一串除法表达式。它不区分这是 CSS 值还是数学运算。
- 所有含
/的 Grid 属性必须整体用~""包裹：grid-area: ~"2/2/3/3"; -
linear-gradient()同理：background: ~"linear-gradient(45deg, #f00, #00f)"; - 含变量时只能用插值：
~"linear-gradient(135deg, @{start}, @{end})"，不能写~"linear-gradient(135deg, @start, @end)" -
~必须紧贴引号，引号内不能换行，否则转义失效
@import 引入 normalize.css 或其他纯 CSS 文件失败？
Less 默认会尝试编译 @import 的内容，遇到 html { margin: 0; } 这类无分号、无 @ 前缀的纯 CSS 就直接崩，报 Unrecognised input。
- 必须加
(css)标志：@import (css) "~normalize.css/normalize.css"; -
(css)告诉 Less：别解析，原样注入到最终 CSS 流中 - 路径前的
~是 Webpack/Vite 别名，确保从node_modules正确定位 - 这个
@import应放在所有其他样式规则之前，保证重置样式优先级最高
嵌套里写 &.active 或 .icon.heart 报错？
Less 把连续的点号（.icon.heart）识别为两个独立类选择器，违反其内部语法校验；&.active 如果 & 后没空格，会被当作新类名而非拼接操作符。
-
.icon.heart→ 改成.icon\.heart（反斜杠转义）或更稳妥的~".icon.heart" -
&.active→ 必须写成&.active（&紧贴，中间无空格），不能是& .active（那变成后代选择器） -
@media内部不能单独用&：@media (max-width: 768px) { & { color: red; } }是非法的，必须先有外层选择器 - 多层嵌套时，
&只绑定上一级，不能跨级；.a { .b { &__c { } } }输出的是.a .b__c，不是.a__c
注释、零宽字符和 BOM 导致“找不到错误在哪”？
Less 对不可见字符极其敏感。复制粘贴自网页、设计稿或 Word 的代码，常含零宽空格（U+200B）、软连字符（U+00AD）或 UTF-8 BOM，这些在编辑器里看不见，却会让编译器直接抛 parse error。
- VS Code 开启「显示不可见字符」（Ctrl+Shift+P → Toggle Render Whitespace）可快速定位
- 避免在变量赋值末尾紧贴写注释：
@color: #333;/* 主色 */→ 旧版 lessc 会误读为不完整声明 - 注释独占一行最安全，尤其在
@import、@mixin、变量定义附近 - 文件保存为 UTF-8 **without BOM**，BOM 在 lessc 4.x 中会被当作非法输入
真正难排查的从来不是语法本身，而是那些“看起来完全合法”的地方：一个没看见的零宽空格、一行紧贴变量的注释、一次忘记加括号的 mixin 调用——它们不会报错在你写的那行，而是让解析器在后续某处突然卡住，提示“missing opening '{'”或“unrecognised input”。动手前先打开不可见字符显示，再逐段注释掉代码验证，比反复猜更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
