less样式架构失控的根源在于变量和mixin的组织混乱：变量须收敛至variables.less并仅含语义化原子值，mixins须封装纯行为且参数默认值引用变量，所有导入由index.less统一控制顺序，bem需用@block+&确保扁平性。
大型项目里，Less样式架构失控的典型表现不是编译失败，而是改一个按钮圆角要 grep 十分钟、主题色更新漏掉三个页面、新人改样式前得先画依赖图——问题不在“用不用Less”，而在“变量和 mixin 往哪放、谁该 import 谁、谁不该知道谁”。
变量必须收敛到 variables.less，且只放设计系统级常量
别在 components/button.less 里写 @button-border-radius: 4px;，也别在 pages/dashboard.less 里定义 @dashboard-header-height。这些不是变量，是硬编码。
-
variables.less只允许出现带语义的原子值：比如@color-primary、@spacing-md、@breakpoint-lg，不带任何组件上下文 - 禁止同名变量跨文件重复声明——Less 不报错，但导入顺序决定最终值，调试时完全不可预期
- 颜色变量优先用 HSL 或自定义函数生成变体，而不是写死一堆
@gray-1～@gray-9；例如@color-text-secondary: lighten(@color-text-primary, 20%); - 所有变量命名加作用域前缀，
@color-、@spacing-、@font-，避免未来和第三方库冲突
mixins 必须封装行为，不能输出选择器，且禁止在组件文件里再 @import
一个 .flex-center() mixin 里如果写了 display: flex + justify-content: center 就合格；但如果它还顺手塞了 .flex-center__item { flex: 1; }，那就越界了——这属于组件职责，不是 mixin 职责。
-
mixins.less只导出可复用的行为抽象：响应式断点.media-breakpoint-up(md)、文本截断.text-ellipsis()、边框圆角.border-radius(@radius: @border-radius-default) - 所有 mixin 参数默认值必须引用变量，而非字面量，比如
.shadow-sm(@blur: @shadow-blur-sm) -
业务组件文件（如
button.less）里禁止@import "mixins"——入口index.less统一导入一次就够了，否则构建可能报 Recursive import - 需要隔离 mixin 作用域？用
@import (reference) "mixins"，但它只让 mixin 可调用，不输出 CSS；适合工具类，不适合组件样式逻辑
入口 index.less 是唯一可信的导入顺序控制点
Less 没有模块依赖图，只有 CSS 层叠顺序。@import 的位置 = 最终 CSS 规则的位置 = 样式覆盖的优先级。靠“谁先加载谁生效”赌顺序，等于把维护权交给运气。
- 根目录
styles/index.less必须严格按顺序导入：@import "variables";→@import "mixins";→@import "base";→@import "components/index";→@import "pages/index"; - 每个子模块（如
components/button）必须自带index.less，只做两件事：显式声明本模块依赖（@import "variables"; @import "mixins";），再@import "button"; - 禁止在
pages/dashboard.less里直接@import "../../mixins/flex-center"——路径会随文件移动失效；统一走别名路径，比如@import "mixins/flex-center";，并在 Webpack/Vite 中配好lessOptions.paths - 主题覆盖层（如
themes/dark.less）必须放在index.less最末尾，确保能覆盖所有基础规则
BEM 嵌套必须靠 @block + & + @{} 拼接，禁用隐式父子关系
Less 本身不支持 BEM 语法，.btn { &__icon { } &--large { } } 看似简洁，但一旦嵌套层级错位或空格遗漏，就会生成 .btn .btn__icon（后代）而非 .btn__icon（独立类名），直接破坏 BEM 扁平性。
- 每个组件根选择器开头必须声明
@block变量：@block: btn;，然后用.@{block} { &__icon { } &--large { } } -
&表示父选择器，@{block}表示字符串插值，二者不能混用；写成&__icon是对的，写成.@{block}__icon就丢失了嵌套上下文 - 超过三层嵌套（比如
.btn { &__icon { &--spin { } } }）必须拆：把--spin提成独立修饰符，或抽成.icon-spin()mixin - 不要为了“看起来整齐”把无关模块塞进同一父选择器，比如把
.header和.sidebar都包进.layout——它们之间没有 BEM 意义的块/元素关系
最易被忽略的一点：所有 @import 都不是“包含”，而是“拼接”。你以为在 button.less 里 @import "variables" 是为了用变量，其实你是在往全局作用域里再塞一遍变量——而入口文件已经塞过一次了。架构的稳定性，从来不是靠功能多，而是靠约束严。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
