嵌套应限于逻辑强关联结构，避免超3层；Mixin按职责拆分并设默认值；主题色分层定义，断点用Mixin封装；警惕@import全量引入和循环生成导致CSS膨胀。
Less嵌套写法怎么避免选择器爆炸
嵌套层级过深会导致编译后CSS选择器冗长、 specificity 过高，后续覆盖困难。比如 .nav > .item:hover > .submenu 这类生成的选择器，后期想单独改 .submenu 样式时，往往得加 !important 或写更长的选择器强行压过。
- 嵌套只用在**逻辑强关联**的结构里，比如
.nav和它的直接子.nav-item；.nav-item和它的状态&:hover可以嵌套，但别一路嵌到三级菜单的.dropdown-menu .item .icon - 用
&显式拼接父级，而不是靠缩进“猜”上下文。例如：.nav-item { &:hover { .nav-submenu { ... } // ✅ 清晰表达：hover 状态下才影响 submenu } .nav-submenu { ... } // ❌ 外层无状态时也生效，易误触 } - 超过 3 层嵌套（如
.nav .item .submenu .link）建议拆成独立 class，比如给深层元素加class="nav-link-icon"，再单独写规则
Mixin怎么封装导航栏状态切换逻辑
导航栏常见交互：hover / active / disabled / mobile-collapse，用 Mixin 把重复的样式块抽出来，比复制粘贴安全，也方便统一调整过渡动效或颜色变量。
- 别把所有状态塞进一个叫
.nav-states()的大 Mixin；按职责拆：比如.nav-hover-effect()、.nav-active-indicator(@color)，调用时意图明确 - 带参数的 Mixin 要设默认值，防止漏传导致编译失败：
.nav-active-indicator(@color: @primary-color) { &.is-active::after { background-color: @color; } } - 慎用
!important在 Mixin 里硬编码——它会污染调用点的优先级逻辑；真需要强制覆盖，宁可让调用方自己加!important，Mixin 只管样式内容
如何让导航栏支持主题色与断点灵活切换
可扩展不等于无限堆配置，关键是在变量和媒体查询之间划清责任边界：变量管「值」，媒体查询管「结构响应」。
- 主题色用变量控制，但别每个颜色都单独变量（
@nav-bg、@nav-text、@nav-hover-bg…），而是分层定义：@theme-primary是基础色，@nav-bg基于它计算：@nav-bg: lighten(@theme-primary, 40%);
- 断点用函数封装，而非硬写
@media (max-width: 768px)：定义.respond-to(@breakpoint)Mixin，内部查表映射，后续换断点数值只需改一处 - 移动端折叠菜单的 JS 控制类（如
.nav--mobile-open）必须和 CSS 类名对齐，否则 Less 编译不出对应规则；检查 HTML 中 class 是否和&.nav--mobile-open完全一致
编译后CSS体积暴增？检查这些Less陷阱
Less 本身不慢，但不当用法会让输出 CSS 膨胀数倍，尤其在导航栏这种高频复用组件里，问题会被放大。
立即学习“前端免费学习笔记（深入）”；
- 用
@import引入整个variables.less时，如果里面包含大量未使用的颜色/尺寸变量，它们不会被 Tree-shaking —— Less 没这功能，全量编译进去 - 循环生成样式（
.generate-nav-items(5)）容易失控，每多一项就多一整套 hover/focus/active 规则；确认是否真需要动态数量，还是静态写 5 个更可控 - 调试时别留着
// debug: true这类注释，某些构建工具会把注释原样输出到 CSS，上线后增加 KB 级无用内容
导航栏看似简单，但嵌套深度、Mixin 参数粒度、变量作用域这三处，只要有一处没对齐设计意图，后续改起来就是牵一发而动全身。特别是多人协作时，别人不一定知道你那个 .nav-flex-center() Mixin 其实还偷偷改了 line-height。
