Less中CSS顺序变化源于@import提升、嵌套生成后代选择器及变量/mixin展开时机，非编译器乱序；可控顺序需集中@import于入口顶部、组件内禁用@import、mixin原子化。
Less构建产物中CSS样式顺序变化，不是编译器“乱序”，而是你写的@import顺序和嵌套结构，在编译期被严格展开后，映射成最终CSS规则的位置发生了偏移——它完全符合Less设计逻辑，但常被误认为是bug。
@import在编译期被提升并线性拼接
Less的@import不是运行时加载，所有@import语句会在解析阶段被提到文件顶部，按书写顺序依次内联展开。这意味着：
- 你在
button.less末尾写的@import "mixins.less";，实际效果等同于把它写在button.less最开头 - 如果
index.less里先@import "button.less"，再@import "header.less"，那header.less里的所有规则一定出现在button.less输出内容之后 - 但如果你在
button.less内部又@import "reset.less"，那reset.less的内容会被插进button.less中间——这打破了主入口的分层顺序，导致重置样式反而盖住了按钮样式
嵌套规则不等于作用域隔离
Less嵌套生成的是后代选择器，不是CSS作用域封装。一个没收束的&会直接污染全局：
-
.card { .title { color: red; } }→ 编译为.card .title，只要页面任意位置有.title，就会被影响 -
.card { > .content { padding: 1rem; } }少写一个&，就变成独立规则> .content，匹配整个文档 - 真正隔离靠的是BEM式写法：
.card { &__title { color: red; } }→.card__title，物理级命名隔离
变量和mixin展开时机决定属性顺序
单个选择器内的CSS属性顺序，只由两件事决定：你写的顺序 + mixin展开时机。其他全是干扰项：
立即学习“前端免费学习笔记（深入）”；
-
.btn { .flex-center(); color: red; }→display、justify-content等一定在.flex-center()定义的顺序下插入，color: red一定在其后 - 嵌套中重定义变量会改变后续调用：
&__header { @gap: 8px; margin-bottom: @gap; } &__body { @gap: 16px; padding-top: @gap; }→ 两个块实际都取16px，因为@gap被覆盖了 -
@import (reference)不影响属性顺序，但它让mixin可跨文件调用；如果button.less调用了未提前@import的mixins.less，编译直接失败，根本到不了CSS输出环节
真正可控的顺序控制点只有三个
想让CSS顺序稳定，必须放弃“靠工具后期修正”的想法，回到Less源码层约束：
- 所有
@import集中写在主入口（如index.less）顶部，严格按「reset → variables/mixins → base → components → pages」分层排列 - 组件文件内部禁止
@import，依赖通过构建时路径或@import (reference)注入，避免隐式插入点 - mixin定义必须原子化：
.flex-center()只管flex布局，不混padding或font-size；否则调用时属性插入顺序不可预测
最容易被忽略的是：你以为的“顺序错乱”，往往发生在@import链深处——比如五个组件都@import "breakpoints.less"却没加(once)，结果同一套媒体查询被复制五次，而你只在最后那个文件里改了断点值。
