less代码规范的核心是防止变量覆盖、选择器爆炸和样式静默失效，通过控制作用域、约束嵌套、隔离导入链实现；基础变量须统一收口，嵌套限三层内，@import集中于入口文件顶部，mixin必须带参且独立定义。
Less代码规范不是为了“写得好看”，而是防止变量覆盖、选择器爆炸、样式静默失效这三类高频生产故障。核心是控制作用域、约束嵌套、隔离导入链。
如何防止变量被意外覆盖
Less里@color-primary这种变量一旦在多个@import文件中重复定义，后加载的会直接覆盖前面的——编译器不报错，但按钮颜色突然变灰这类问题就来了。
- 所有基础变量（颜色、断点、间距）必须收进单一文件，如
variables.less - 组件或页面less里禁止直接赋值
@color-bg: #f8f9fa，只允许引用已有变量，比如@color-bg: @color-surface-light - 用
@import (reference) "variables.less"引入变量文件，它不输出CSS，只提供上下文；真正需要样式时，再通过.mixin或显式调用生成 - 避免在嵌套块内重新声明同名变量，比如
.card { @gap: 16px; .item { margin: @gap; } }——这个@gap只在.card作用域生效，但容易和全局@gap混淆
为什么嵌套超过三层就该警惕
编译后生成的选择器如.layout .header .nav .item:hover不仅特异性高到难以覆盖，还会让CSS体积翻倍。更危险的是，开发者误以为“缩进浅=权重低”，结果写出& .child这种反而提升权重的写法。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 嵌套只用于强视觉关联结构，比如
.modal内部的.modal-header、.modal-body - 伪类/伪元素必须带
&:前缀，&:hover✅，单独写hover❌（会编译成全局hover） - 子元素关系用
& > .child显式声明，别依赖空格隐式后代 - 媒体查询不要塞在深层嵌套里，提出来单独写，避免每个子规则都重复包裹
@media
@import顺序错乱导致样式失效怎么定位
Less不是按文件路径加载，而是线性展开@import语句。如果base.less里又@import "variables.less"，那它的variables.less就会插在当前文件中间，可能覆盖你入口文件定义的主变量。
- 所有
@import必须集中写在项目入口文件顶部，禁止分散在各组件less中 - 若必须分层，严格划分为：
core/（仅变量+函数）、mixins/（纯逻辑，不依赖其他mixin）、components/（只@import前两者，禁止互相引用） - 禁用
@import (optional)——缺失文件时整个后续链静默失效，调试时根本看不出哪段没加载 -
@import路径必须带.less后缀，引号统一用双引号，如@import "mixins/border-radius.less"
Mixin设计不当引发的连锁覆盖
无参Mixin如.reset-list { list-style: none; margin: 0; padding: 0; }看着省事，实则等于把重复代码复制了N次，且无法约束参数来源；而带参Mixin若默认值依赖外部变量，重构时根本不知道它暗中用了哪个@r。
- 所有Mixin必须带参数，哪怕设默认值，如
.border-radius(@r: 4px)，禁止无参纯声明块 - 参数命名用短横线分隔，如
@bg、@color，不用@backgroundColor - 避免嵌套调用Mixin：
.btn { .flex-center(); .border-radius(2px); }——如果.flex-center()内部用了@gap，而@gap在别处被重定义，结果不可控 - Mixin文件统一放在
mixins/目录，命名以.开头，如.text-truncate()
最常被忽略的其实是@import (reference)和&这两个符号的实际行为：前者不输出CSS但提供变量上下文，后者不是“当前选择器”而是“父选择器完整副本”。理解这点，才能避开80%的编译后样式异常。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
