less嵌套超3层会导致选择器权重失控、浏览器匹配变慢、调试困难；编译后如.card .header .title .icon权重达0-4-0，远超单类名覆盖能力，须用bem等方案拆平。
Less 本身不提升 CSS 的运行时体验，它只影响人读代码时的顺畅度。嵌套和注释不是“加功能”，而是降低认知负荷的手段——但用错地方反而让调试更难。
嵌套层级超过 3 层时，CSS 选择器权重会失控
编译后选择器长度直接决定权重。.card { .header { .title { .icon {} } } } → .card .header .title .icon（权重 0-4-0），比 .icon 高出整整四级，后续几乎无法用单类名覆盖。
- 只对语义强绑定的组件内部嵌套，比如
.modal下的&__body、&__footer - 布局类（如
.container、.row）禁用深层嵌套，它们本该解耦复用 - 媒体查询内嵌套必须加
&显式引用父级，否则@media (max-width: 768px) { .nav { a {} } }编译后是全局a，不是.nav a - 检查编译输出，用浏览器开发者工具看真实选择器，超 3 级组合就该拆
// 注释在编译后彻底消失，别指望它帮调试
写 // 临时禁用这一行 没问题，但写 // 这里要兼容 iOS 12 就白写了——上线后根本看不到。
-
//只存在于 Less 源码，适合逻辑开关或开发中备注 -
/* */会进最终 CSS，但可能被css-minimizer-webpack-plugin等压缩器删掉 - 想留运行时说明，得靠团队约定前缀，例如在文件顶部定义
@comment-prefix: "/* [src/components/Button.less] ";，再写@{comment-prefix} 主按钮默认尺寸 */ - Mixin 内部写
/* */注释不影响输出体积，但写在调用处（如.btn-primary { .btn-base(); /* 主色变体 */ }）会导致注释出现在生成的 CSS 规则上方，干扰压缩判断
& 拼接伪类时漏空格，会编译成非法选择器
.link:hover 和 .link :hover 是两回事。Less 里写成 .link{:hover} 或 .link:hover（无空格）会被解析为标签选择器，报 Unknown word 错误。
- 伪类/伪元素必须用
&:hover、&::before，&后紧跟冒号，中间不能有空格 - 拼接类名用
&.is-active（无空格），后代选择器才用& .child（有空格） - 子选择器必须显式写
& > .item，不能依赖缩进，默认空格就是后代关系 - 开启 Less 的
strictMath和strictUnits选项，能提前捕获这类语法歧义
嵌套和注释真正的难点，从来不在语法怎么写，而在于每次敲下 { 或 /* 前，得想清楚：这个结构是给机器执行的，还是给人看的？前者要克制，后者要可追溯。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
