less变量需在父级作用域声明，遵循就近向上查找规则；mixin须显式传参或用可变参数透传上下文；嵌套中调用mixin必须加括号，避免与选择器混淆。
Less变量怎么在嵌套规则里正确引用
变量不是写在哪都能用的，作用域搞错就报 Variable @xxx is undefined。Less变量遵循“就近向上查找”规则，但只认声明过的父级作用域，不跨选择器或混合（mixin）边界。
实操建议：
- 在
:root或顶层@variables块里定义全局变量，避免嵌套中反复声明 - 嵌套层级内想用变量，确保它在当前选择器块的上层已声明（比如在
.card { ... }外声明@card-padding，再在.card__header里用） - 别在
&:hover或@media嵌套内部重新定义同名变量——这会覆盖外层，且后续嵌套可能读不到原始值
Less混合（mixin）如何接收并透传嵌套上下文
直接写 .mixin() { padding: @padding; } 在嵌套里调用，@padding 会取 mixin 自身作用域的值，不是调用处的。要让 mixin “感知”外部嵌套环境，得靠参数或带括号的可变参数。
实操建议：
- 显式传参最安全：
.card-padding(@p: 12px) { padding: @p; }，调用时写.card-padding(@card-padding) - 需要透传多个值？用可变参数：
.flex-center(...) { display: flex; justify-content: center; align-items: center; .-apply(...); }，再配合.-apply内部展开 - 避免无参 mixin 依赖外部变量——它在不同嵌套位置行为不一致，调试时容易误判来源
嵌套选择器里调用带参数 mixin 的常见报错
典型错误是 Expected ')' got '{' 或 Mixin is not defined，本质是 Less 解析器把嵌套结构和 mixin 调用语法弄混了，尤其当 mixin 名和选择器名相似、或用了 & 符号时。
实操建议：
- 调用 mixin 必须加括号，哪怕无参：
.clearfix()，不能写成.clearfix（否则会被当选择器） -
&是嵌套占位符，不能和 mixin 混用：错误写法&.active .btn { .theme-color(); }→ 正确应为&.active { .btn { .theme-color(); } } - 如果 mixin 名含连字符（如
.text-truncate），调用时保持原样，不要转驼峰或去横线
嵌套 + 变量 + mixin 组合时的编译性能隐患
深层嵌套（>5 层）叠加多层 mixin 调用，会导致 CSS 输出体积膨胀、编译变慢，尤其开启 strictMath: on 或大量使用 unit()/percentage() 计算时。
实操建议：
- 用
lessc --verbose查看实际生成的 CSS 行数，确认是否出现重复规则（比如同一 mixin 在多个嵌套路径下被展开多次） - 对高频复用的组合逻辑，优先抽成单一 class（如
.card--sm），而非靠嵌套 + mixin 动态拼接 - 避免在
@media嵌套内部再调用含计算的 mixin——每次媒体查询都会触发一遍计算，而不是编译期一次求值
@spacing-xs 是在哪个 @import 里定义的。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
