less变量命名必须绑定设计系统语义，如用@primary-color而非@blue-500、@space-sm而非@spacing-xs，优先级为用途>位置>值特征，禁用硬编码与无语义名，配合mixin和json导出实现跨工具链可搜索、可维护的样式体系。
Less变量命名必须绑定设计系统语义，不能只图写得快
直接用 @primary-color 而不是 @blue-500，是因为搜索时你找的是“主色”，不是“某个蓝”。一旦UI规范调整主色从蓝色换成紫色，所有用 @primary-color 的地方自动生效，而搜 @blue-500 会漏掉按钮、边框、加载条里那些没写明“blue”但实际用了同个值的地方。
常见错误是把变量当CSS常量用：@spacing-xs: 4px 看似合理，但“xs”是尺寸层级概念，不是语义；换成 @space-sm: 4px 更好——因为你在组件里写 margin: @space-sm，搜索 @space-sm 就能定位所有小间距使用点，而不是猜哪个 @spacing-* 对应“按钮内边距”。
- 变量名优先级：用途 > 位置 > 值特征（如
@btn-bg-active✅，@bg-active-blue❌） - 避免带具体值的命名：
@gray-300在主题切换时会失效；改用@color-disabled或@color-border-subtle - 同一语义在不同上下文可加前缀区分：
@text-heading和@text-body比@h1-color/@p-color更易维护
嵌套结构里用 & 配合语义类名，别靠路径猜样式归属
搜索一个按钮悬停态，如果写成：
.btn { &:hover { color: @text-link-hover; } }
那搜 .btn:hover 能定位到，但搜 @text-link-hover 也能顺藤摸瓜找到所有用到该语义颜色的地方。反过来，如果写成：
.btn { .btn__icon { &:hover { color: #007bff; } } }
就彻底断了语义链——#007bff 是硬编码，搜不到、换不了、也不知它代表什么。
- 嵌套中尽量复用已有语义变量，而不是新起局部变量
-
&要显式写出完整语义类名：&.is-loading比&[aria-busy="true"]更易搜、更直观 - 避免三层以上嵌套：超过
.card .card__header .title--large这种路径，搜索时很难反推它属于哪个模块
用 Less 的 .mixin 抽离重复模式，而不是复制粘贴选择器
比如圆角、阴影、过渡动效，每个都该有对应语义 mixin：.rounded-sm()、.shadow-md()、.transition-fade()。这样搜索 .rounded-sm() 就知道全站哪些元素用了小圆角，而不是在几十个文件里 grep border-radius: 4px。
- mixin 名称必须反映行为或用途，不体现技术细节：
.flex-center()✅，.d-flex-ai-c-jc-c()❌ - 带参数的 mixin 要限制可选值：
.text-size(@size: body)，合法值限定为body/caption/heading，避免传入任意字符串导致搜索失焦 - 慎用
!important在 mixin 内：它会让搜索出的样式难以判断真实优先级，也破坏语义意图
导出变量 JSON 供 IDE 或工具链消费，让搜索跳出 Less 文件本身
Less 本身不支持运行时变量反射，但可以用 less-plugin-vars 或自定义脚本把 @xxx 变量提取成 JSON。这样 VS Code 插件、Figma 设计系统插件、甚至前端组件文档工具，都能基于语义名做跳转和替换。
例如导出后得到：
{ "primary-color": "#2563eb", "space-md": "16px", "radius-lg": "12px" }
这时在 Figma 里搜 primary-color，就能对齐开发侧；在代码里 Ctrl+Click 一个变量，直接跳到定义处——前提是变量名真有语义，不是 @c1 @s2 这种。
- 导出脚本要过滤掉局部作用域变量（如 mixin 内定义的
@tmp），只保留根级语义变量 - 变量值若含单位（如
16px），JSON 中保持字符串格式，避免被工具误解析为数字 - CI 流程中校验导出 JSON 是否为空或字段缺失，防止语义链断裂却不报警
最麻烦的不是写 Less，是变量命名那一刻没想清楚“这个值在产品语言里叫什么”。搜不到，往往是因为它根本没被赋予一个可被理解的名字。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
