7-1模式成败关键在于严守各目录修改边界：base/存全局默认样式，utils/仅放纯逻辑（变量/mixin/函数），components/按ui单元拆分且禁止跨引用，@import顺序决定编译时声明依赖，越界即架构失效。
直接说结论：7-1 模式本身不解决问题，真正起作用的是每个目录的修改边界是否被守住——放错文件比没建目录更危险。
为什么 main.scss 的 @import 顺序不能调换
SCSS 编译器不做依赖分析，只按 @import 行顺序拼接代码。变量、mixin、函数必须先声明后使用，否则就是隐性崩溃（不报错但样式失效）。
-
@import 'base/variables'必须在@import 'base/mixins'之前，因为 mixin 里要读$breakpoints -
@import 'vendor/normalize'必须在@import 'base/reset'之前，否则第三方样式可能污染重置规则 -
@import 'pages/home'必须放在最后，它只做覆盖，不提供任何基础能力 - 一旦顺序错，
@include button-style就会报Undefined mixin，map-get($colors, primary)就返回空值
base/ 和 utils/ 的职责怎么划清
这两个目录最容易混用，混淆后项目越写越难维护。
-
base/是根级“基础设施”：只放_reset.scss、_typography.scss、:root { --color-primary: #3498db; }这类全局默认值 -
utils/（或abstracts/）是纯逻辑层：只存_variables.scss（断点 map、主题色 map）、_mixins.scss（@mixin respond-to($bp)）、_functions.scss（@function em($px)） - ❌ 错误：
utils/_mixins.scss里写@mixin card-shadow——这是components/_card.scss的事 - ✅ 正确：
components/_card.scss内部调用map-get($shadows, sm)+@include respond-to(md)
components/ 文件粒度与嵌套陷阱
每个 .scss 文件应对应一个视觉上可独立存在的 UI 单元，比如 _button.scss、_modal.scss，但实际编码中容易踩坑。
- 禁止跨组件引用：不要在
_button.scss里@import '../pages/home'，也不该依赖pages/下的任何东西 - 避免深层嵌套：
.header { .nav { &__item { } } }编译后是.header .nav .nav__item，权重高、难覆盖；应平铺写成.nav__item - 嵌套必须以 BEM 块为根节点，只嵌套其直接子元素（
&__title）和修饰符（&--compact） - 用
@use替代@import，确保变量、mixin 不泄露到全局——否则改一个按钮颜色，整个导航栏跟着变
最常被忽略的一点：目录结构再标准，只要把 $card-shadow 放进 utils/_variables.scss，或者在 base/_typography.scss 里塞进 .btn 样式，整个 7-1 架构就立刻失效——不是它不好用，是你没守边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
