Less中@import顺序即CSS层叠顺序，所有@import在编译期被提升至入口文件顶部，按书写顺序拼接内容，后导入的同权重规则覆盖前者，须严格按“重置→变量/mixin→基础组件→业务组件→页面定制”分层导入。
@import 语句在编译期被提升，实际顺序由导入位置决定
Less 不是边读边编译，所有 @import 语句会在解析阶段被“提到文件最前面”，然后按书写顺序依次展开内容。你在 index.less 里这样写：
@import "reset.less"; @import "variables.less"; @import "components/button.less";
那最终 CSS 中 button.less 输出的所有规则，一定排在 reset.less 和 variables.less 之后——哪怕 button.less 内部又写了 @import "mixins.less"，它的样式块位置仍由主入口的导入顺序锁定。
- 嵌套
@import（比如在button.less里再@import）会让依赖链不可控，应禁止 - 用
@import (reference)引入只提供变量/mixin 的文件，避免重复输出样式块干扰顺序 - 所有
@import必须集中放在入口文件最开头，按「重置 → 变量/混入 → 基础组件 → 页面样式」分层排列
同一选择器内属性顺序只受 mixin 展开时机和源码书写影响
你看到的 .btn { display: flex; justify-content: center; } 里两行谁前谁后，完全取决于：你写的顺序 + .flex-center() 是不是在它前面调用。比如：
.btn {
.flex-center();
background: #fff;
}
只要 .flex-center() 定义里是 display: flex; justify-content: center;，那这两条就一定在 background 前面——因为 mixin 是“原样插入”到调用位置的。
立即学习“前端免费学习笔记（深入）”；
- 变量赋值（如
@color: red;）不输出 CSS，也不影响属性顺序 - 嵌套中重定义同名变量（如
&__header { @gap: 8px; }后又&__body { @gap: 16px; }）会改变后续所有使用该变量的值，但不会打乱属性顺序本身 - 如果你发现
background跑到了display前面，大概率是你在 Less 源码里就把background写在了display前面，或者某个 mixin 里混写了布局和视觉属性
开发者工具里看到的“划掉”样式，往往不是顺序问题
浏览器开发者工具中标灰、带横线的样式，常被误认为是“被后面同名属性覆盖”，其实更可能是：
- 整条声明被旧浏览器（如 IE11）静默丢弃，比如用了
gap或var()且未降级 - 选择器权重不够，被另一处更具体的规则（如
button.btnvs.btn）覆盖，和属性顺序无关 - CSSLint 或其他工具只检查最终 CSS 字符串，对 Less 编译逻辑完全无感知，它报的“顺序警告”只是对输出结果的静态扫描，不能反推编译过程
路径错误或变量未定义会导致编译中止，根本没生成 CSS
Less 编译失败时不会报错退出，而是原样输出未解析的部分，比如你看到 @primary-color 出现在最终 CSS 里，这不是“顺序乱了”，而是编译压根没成功：
-
@import "./variables.less";写在使用变量的规则之后——Less 是顺序执行，不支持“先用后定义” - Vue 单文件组件的
<style lang="less"></style>里直接写@primary-color，但没通过@import显式引入变量文件——每个<style></style>是独立编译上下文 - 路径拼错或文件为空，导致
@import静默失败，后续变量不可见 - Webpack 中
less-loader配置了javascriptEnabled: true但没设throwOnImportError: true，错误被吞掉
真正影响顺序的只有 @import 在入口文件中的书写顺序，以及单个选择器内 mixin 调用位置和源码声明顺序。其他全是表象。
