Less嵌套应控制深度≤3层，用&显式引用父级，避免照搬HTML结构；需配合变量和mixin参数化样式，禁用硬编码值；警惕选择器权重失控，编译后超3级组合须拆分。
Less嵌套规则怎么写才不生成冗余选择器
嵌套本身不会提升效率，写错才会拖慢编译和维护。关键在于控制嵌套深度和避免无意义的父选择器重复。
常见错误是把 HTML 结构直接照搬进嵌套：.header { .nav { .item { ... } } }，结果编译出 .header .nav .item，既难覆盖又难调试。
- 只对有明确语义关系的组件嵌套，比如
.btn { &--primary { ... } } - 用
&显式引用父级，避免意外拼接（&:hover而不是:hover） - 嵌套层级建议 ≤ 3 层；超过时拆成独立类或用
extend
如何用嵌套配合变量和混合（mixin）减少重复代码
单纯嵌套只是缩写，真正提效靠的是和 @variable、.mixin() 协同。比如按钮样式，颜色、边框、尺寸都该参数化。
错误做法：每个按钮变体都写一遍嵌套结构；正确做法是定义一个可配置的 .btn-base()，再用嵌套组织状态：
.btn {
.btn-base(@color: #007bff);
&:hover { .btn-base(darken(@color, 10%)); }
&--danger { .btn-base(#dc3545); }
}
- 状态类（
:hover、:disabled）优先在嵌套内用&表达 - 主题变体（
--primary、--outline）用带参数的 mixin + 嵌套调用，而非复制整块样式 - 避免在嵌套里写硬编码值，所有数值、颜色走变量
嵌套导致 CSS 选择器权重失控怎么办
这是最隐蔽的坑：.card { .title { .icon { ... } } } 编译后是 .card .title .icon，权重为 0-3-0，比 .icon 高太多，后续想用简单类名覆盖几乎不可能。
- 用
class名做语义分组，而不是靠嵌套“模拟” DOM 深度 - 需要强隔离时，改用 CSS Modules 或
:local()作用域，别依赖嵌套压权重 - 检查编译后 CSS，用浏览器开发者工具看实际选择器长度；超过 3 级组合就该警觉
为什么有些嵌套在编译后没生效或报错
常见于符号误用或上下文丢失。Less 对空格、括号、& 的位置很敏感。
典型错误：
-
.parent { .child { color: red; } .sibling { color: blue; } }→.sibling不会自动带上.parent前缀，它只是同级声明 -
.item:hover{...}少了空格 → Less 会当成自定义标签选择器解析，报Unknown word - 在
@media查询内嵌套时忘了加&，导致媒体查询失效
调试技巧：打开 Less 编译器的 strictMath 和 strictUnits 选项，能提前暴露语法歧义。
嵌套不是万能缩写，它是把结构意图翻译成 CSS 的中间层——译得准，才省事；译错了，后面全是债。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
