less 的 + 和 +() 合并不生效，需确认使用 less 编译、文件后缀为 .less、变量已初始化为 list 且作用域正确、版本 ≥3.8.0，并确保多值逗号分隔、单位一致。
Less 的 + 和 +() 合并不生效？先确认你真在用 Less，不是 CSS
Less 的属性合并（如 box-shadow+、transform+()）是 Less 特有语法，CSS 原生不支持。如果你把带 + 的代码直接写进 .css 文件，或没经 Less 编译就丢进 HTML，它会原样保留——浏览器不认识，直接忽略整条声明。
- 检查文件后缀和构建链：必须是
.less文件，且被less-loader或npx lessc处理过 - 验证编译输出：打开生成的 CSS，搜
box-shadow:—— 如果看到的是空格拼接（如0 2px 4px rgba(0,0,0,0.1) 0 -1px 2px rgba(255,0,0,0.2)），说明+没触发合并；正确应为逗号分隔（0 2px 4px rgba(0,0,0,0.1), 0 -1px 2px rgba(255,0,0,0.2)） -
+只对同一属性名生效，不能跨属性混用：box-shadow+不会合并text-shadow
append() 报 “variable is undefined”？作用域和初始化漏了
Less 的 append() 要求目标变量已声明且类型为 list，否则编译失败。常见错误是只在 mixin 内部定义变量，但未在作用域顶层初始化。
- 必须提前初始化：
@shadows: [];（空 list），不能只写@shadows: append(@shadows, ...); - 变量作用域受限：如果
@shadows在.mixin()内定义，外部调用时不可见；应提至全局或 mixin 参数传入 -
append()是 Less v3.8+ 才支持，运行npx lessc --version确认版本 ≥3.8.0；旧版会直接报错 - 别用
@shadows: @shadows, @val;—— 这是非法赋值，Less 不支持变量自增式拼接
合并后 CSS 无效？多值格式不对或单位冲突
即使 Less 成功合并，输出的 CSS 仍可能被浏览器拒绝，原因常出在值格式或单位混合上。
-
box-shadow多值必须用逗号分隔，不能靠空格：@shadows: (0 2px 4px red), (0 -1px 2px blue);✅；@shadows: (0 2px 4px red) (0 -1px 2px blue);❌（空格连接 → 浏览器解析失败） - 单位必须一致：
append(@list, 10px)和append(@list, 1em)混用会导致 list 类型混乱，后续box-shadow: @list;可能编译失败或输出异常 - 避免嵌套计算干扰：
@val: 10px / 2;若未加括号（即10px / 2），Less 4.0+ 会原样输出10px / 2，导致整个box-shadow声明失效（浏览器静默丢弃）
为什么不用 PostCSS？Less 层面合并本质是妥协
Less 的属性合并语法脆弱、难调试、版本依赖强，真实项目中更可靠的做法是绕过它。
- 直接写标准单值：
.card { box-shadow: 0 2px 4px rgba(0,0,0,0.1); }+.card.active { box-shadow: 0 -1px 2px rgba(255,0,0,0.2); }，靠 CSS cascade 或 class 组合叠加效果 - 交给 PostCSS：用
postcss-combine-duplicated-selectors或cssnano在 CSS 层压缩去重，不碰 Less 源码 - JS 动态控制：对需要运行时合并的场景（如用户配置阴影），用 JS 拼接字符串再
element.style.boxShadow = '...'，避开编译期限制
Less 合并语法的坑不在写法本身，而在它要求你同时兼顾变量作用域、版本兼容、单位一致性、输出格式——任何一个环节断掉，生成的 CSS 就只是看起来“有内容”，实际不生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
