less中调用mixin必须加括号，如.flex-center()；漏括号会被解析为选择器或未完成声明，导致样式丢失、编译报错或静默失效。
Less里写.mixin-name没括号，样式就丢了
这不是CSS语法错，是Less把.mixin-name当成了选择器或未完成的属性声明。比如.card { .shadow; }，编译器会卡在等分号，报css-semicolonexpected，然后整块规则不输出——你根本看不到生成的box-shadow。
-
.flex-center→ 错，这是选择器写法，不是调用 -
.flex-center()→ 对，哪怕无参也必须带() - 嵌套里高发：
&:hover { .transition(); .color-change; }，第二处漏括号就中断后续解析 - 从现成CSS复制粘贴时，特别要重扫每行开头是不是
.开头又没()
注释位置不对，Less直接parse error
Less对注释敏感，尤其靠近变量、@import或mixin定义时。比如@primary-color: #333;/* 主色定义 */，旧版lessc 3.13.x会把/*黏在值后面，当成非法输入。
- 安全写法：注释独占一行，前后留空行
- 禁止在
@import行末加/* */，如@import "mixins.less"; /* 工具类 */ - 别用Word或网页复制注释，容易混入零宽空格（U+200B）或全角斜杠
- VS Code开启“显示不可见字符”，一眼揪出隐藏字符
嵌套层级过深，生成的选择器权重爆表
Less嵌套本身不改CSS优先级规则，但.a .b .c .d { color: red; }这种四层嵌套，权重远高于.d { color: blue; }，后者根本覆盖不了前者。
- 控制嵌套≤2层，优先用扁平类名组合，如
.btn .btn--primary - 用
&拼接伪类时注意位置：&:hover正确，:hover &会生成错误选择器 - 检查编译后CSS，看是否出现冗长后代选择器，比如
.layout .sidebar .content .item
深度选择器/deep/失效，得手动转义
Vue等框架里的/deep/不是标准CSS，Less不识别。直接写/deep/ .cube-btn会被当成非法token，整个文件编译失败。
- 定义变量转义：
@deep: ~">>>"; - 调用时注入：
@{deep} .cube-btn { background: red; } - 别写
~"/deep/"，Less不认这个字符串，只认~">>>"这类合法转义
真正卡住人的，往往不是语法多难，而是错误发生在调用点而非定义点——.mixin()少个括号，@import后多行注释，嵌套里&放错位置……这些地方不报红，却让样式静默消失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
