Less变量须带语义前缀（如@color-primary）、嵌套限3层内并用&绑定父级、Mixin必设默认参数与when守卫、import顺序固定为variables→mixins→reset→components→pages，且开发期必须开启source-map。
Less 不是“可选的增强”，而是现代前端 CSS 工作流中事实上的基础层——它解决的不是“写得更酷”，而是“改得不崩溃”“查得不抓狂”“换主题不重写三遍”这类真实交付压力。
变量声明必须带作用域，否则会污染全局
很多人写 @primary-color: #007bff; 直接放在 .less 文件顶层，结果在另一个组件里改了同名变量，整个项目按钮、标题、边框全变色。这不是 Less 的 bug，是误用。
- 变量只在定义它的块级作用域内生效，
@primary-color写在.button {}里面，就只影响这个类；写在.theme-dark {}里，就只在暗色主题下起作用 - 推荐做法：所有变量集中定义在
variables.less中，且用命名空间包裹，比如.theme { @primary-color: #007bff; }，调用时用.theme[@primary-color]（需配合命名空间调用）或直接@import后在局部覆盖 - 裸变量（无包裹）仅用于项目级常量，且必须确保全项目只 import 一次，不能被子模块重复 import 覆盖
嵌套超过 3 层就会生成冗长选择器，覆盖成本飙升
写 .card { .header { .title { .icon { ... } } } } 看起来结构清晰，但编译后是 .card .header .title .icon，权重高、难覆盖、性能差，Chrome DevTools 里点都点不到对应源码行。
- 嵌套只应反映**语义层级**，不是 HTML 结构层级；
&:hover、&::before这类伪类/伪元素必须用&显式绑定父级，否则hover会被当成独立选择器编译成错误 CSS - 超过 3 层嵌套时，优先拆成独立 class 或用 Mixin 封装逻辑，例如把
.card-header-title-icon抽成.icon-title(@size) - Vue / React 单文件组件中，嵌套应严格限制在
<style scoped>内部，避免穿透污染
Mixin 必须设默认参数，且用 when 做条件分支
写 .btn(@color) { color: @color; } 然后在别处调用 .btn()，编译直接报错：Missing argument for @color。这不是语法问题，是没理解 Mixin 是函数，不是 class。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- 所有参数必须提供默认值：
.btn(@color: @primary-color, @size: md) - 分支逻辑不用 JS 风格 if，而用
when条件守卫：.btn(@type) when (@type = primary) { background: @primary-color; } - 禁止在 Mixin 内部写
@import或@media，它们属于调用上下文，由使用者决定何时、在哪注入 - 调试技巧：给 Mixin 加
// debug: @color注释，编译后 CSS 里会保留，方便定位传参是否正确
开发期必须开 source-map，禁用压缩，否则调试等于盲人摸象
线上环境压缩 CSS 没问题，但开发时如果 Less 编译输出的是单行无注释、无映射的 CSS，你改了 variables.less 里的 @spacing-xs，浏览器里看到 margin: 4px 却找不到它来自哪一行、哪个文件——这是最浪费时间的卡点。
- Webpack 中配置
less-loader时，sourceMap: true必须开启，且compress: false - 命令行编译用
lessc --source-map --no-js，禁用 JS 执行（防恶意代码）但保留映射 - VS Code 安装 “Easy LESS” 插件可实时预览编译结果，但注意它不走 webpack 配置，调试仍要以构建工具为准
真正卡住团队效率的，从来不是“会不会写 Less”，而是变量谁在改、嵌套谁在破、Mixin 谁在乱传参、source-map 谁关掉了——这些细节不统一，协作就退化成手动 diff 和猜谜。
