“css-semicolonexpected”报错八成源于Mixin调用漏括号，如写.shadow而非.shadow()，致编译器误作CSS声明解析而缺分号；需重点检查以.开头无()的调用、嵌套中漏括号及@import末尾换行缺失。
Less 编译报错“css-semicolonexpected”或生成的 CSS 出现样式失效，**八成不是 Less 本身的问题，而是你在 Mixin 调用位置写了非法 CSS 语句，或者混入了未加括号的类名写法，导致编译器误判为普通规则块并尝试解析成 CSS——而 CSS 规则里缺分号就直接炸了。**
为什么 Mixin 调用漏括号会触发分号错误
Less 中 .center（无括号）和 .center()（有括号）语义完全不同：
前者被当成一个普通 class 选择器，编译器会试图把它当 CSS 规则开头来解析；
后者才是合法的 mixin 调用，会被展开为实际样式声明。
一旦你写了 .card { .shadow; } 这种漏括号写法，Less 编译器就会把它理解成：
.card {
.shadow; /* ← 这行被当成了一个“属性: 值”声明，但 .shadow 不是合法属性名 */
}于是报出 css-semicolonexpected：它在等分号，因为以为你正在写一条没写完的 CSS 声明。
立即学习“前端免费学习笔记（深入）”；
-
.shadow没括号 → 编译器按 CSS 解析 → 报分号缺失 -
.shadow()有括号 → 编译器按 mixin 展开 → 正常输出box-shadow: ... - 即使 mixin 定义里本身带分号，调用处漏括号照样报错——错误发生在调用语法层，不是内容层
检查 Mixin 调用处的三个关键点
这类问题不藏在 mixin 定义里，而集中在调用现场。重点扫以下三类写法：
- 所有以
.开头、后面紧接字母/数字但**没有紧跟()** 的行，比如.flex-center、.pad、.btn-primary - 嵌套结构中容易手滑漏括号，例如：
&:hover { .transition(); .color-change; }—— 第二个调用就危险 - 从 CSS 复制粘贴过来的代码段，比如把
.headerContainer { margin: auto }直接塞进 mixin 调用位置，末尾没分号 + 没括号，双重雷
如何快速定位和修复
别一行行肉眼扫。打开编译命令行（如 lessc style.less），看报错行号，然后去对应位置检查三件事：
- 该行是否以
.开头？ - 它后面是否跟了
()？哪怕无参也必须写.mixin-name() - 如果它出现在选择器块内部（如
.btn { ... }里面），确认它不是被当成属性写进去的（比如顶格写了.size(12px)却没缩进，或前面多了空格导致解析错位）
顺手加个 VS Code 设置能省大半力气："editor.formatOnSave": true + 安装 CSS Language Features 扩展，它会在保存时自动标红所有漏括号的 mixin 调用。
容易被忽略的混合陷阱：@import 后的空白与换行
如果你在 @import 语句后紧跟 mixin 调用，比如：
@import "mixins.less";
.card { .shadow(); }看着没问题，但若 mixins.less 文件末尾**没有换行符**，Less 会把 import 和下一行拼成一行，变成：
@import "mixins.less";.card { .shadow(); }某些旧版 lessc 会把这整行当做一个语句处理，进而因格式混乱触发分号校验失败。解决方法很简单：
确保每个 @import 语句后都跟一个空行，或至少一个换行符。
真正难调试的，往往不是语法本身，而是你认为“这里不可能出错”的地方——比如那个你复制过来只改了两行的组件样式块，恰恰漏掉了第 3 个 mixin 的括号。
