@use 是模块隔离硬性前提，sass 6.0+ 已弃用 @import；必须搭配 @forward 统一导出抽象层；layout/ 仅放纯布局工具，语义组件归 components/ 或 sections/；禁用 @extend，改用 @include；变量只保留原子粒度。
@use 是模块隔离的硬性前提，不是可选项。Sass 6.0+ 已弃用 @import，而老项目里靠顺序 @import 变量文件的做法，在多人协作中极易因引入顺序错乱导致 $color-primary 报 Undefined variable。真正的隔离靠 @use 的命名空间机制——变量、混入、函数全被封进前缀，vars.$spacing-md 和 theme.$spacing-md 可共存不冲突。
为什么 @use 必须搭配 @forward 才能组织抽象层
只写 @use 'abstracts/variables' 会让下游模块重复写一堆 @use，违背“一处定义、多处消费”原则。正确做法是在 abstracts/index.scss 里统一 @forward 'variables' with ($primary: #1890ff);，再让其他模块只 @use 'abstracts'。这样既控制了变量默认值，又隐藏了内部路径细节。漏掉 @forward 就等于把模块拆开了却没装回盒子，调用方还得自己拼路径。
layout/ 目录只放容器关系，别塞语义组件
很多团队把 _header.scss、_modal.scss 塞进 layout/，结果布局层越来越重，失去复用能力。真正该放的只有：_grid.scss（栅格工具类）、_container.scss（宽度与居中逻辑）、_flex.scss（@mixin flex-row() 这类纯流式行为）。页头、弹窗这些有交互、带视觉语义的，必须归到 components/ 或 sections/。否则你改一个 .container 的断点，所有页头样式都跟着崩。
禁用 @extend，用 @include 复用布局逻辑
@extend 在编译时合并选择器，比如 .card-header @extend .section-title，输出可能是 .card-header, .section-title { font-size: 1.25rem; }——调试时根本看不出哪个文件定义了这条规则。更糟的是，它会污染 PurgeCSS 的剔除判断，导致无用样式残留。布局逻辑一律改用 @include flex-center，每个类名独立存在，可追踪、可覆盖、可按需加载。唯一可网开一面的是 .visually-hidden 这种纯功能类，但也要确保它只在 abstracts/ 里定义一次。
模块化最易被忽略的点是变量粒度：不要定义 $button-padding 这种带组件语义的变量，只保留 $space-sm: 8px 这类原子值。组件内用计算组合，而不是靠变量名绑定用途——否则换一套设计系统，就得改几十个变量名，而不是只换一组原子值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
