必须用 @use 而非 @import，因其强制命名空间隔离避免变量冲突、支持私有模块、提升可追溯性与编译优化；布局模板须专注容器关系，禁用 @extend，响应式逻辑应在 mixin 内收口，断点统一管理且不可硬编码。
@use 是定义抽象布局模板的强制起点，不改用它，后续所有模块化设计都会失效。
为什么必须用 @use 而不是 @import
老项目还在用 @import？变量会全局污染——比如两个布局文件都声明了 $grid-gap，后引入的那个会静默覆盖前一个，编译结果错乱但找不到源头。而 @use 强制命名空间隔离：@use "layout/grid" as grid 后，必须写 grid.$gap-sm 才能访问，冲突直接暴露在调用侧。
常见错误现象：改了一个断点值，多个组件样式意外偏移；或 @include grid-cols(4) 在不同文件里行为不一致——八成是 @import 导致的变量作用域混乱。
-
@use模块默认私有，变量/混入不会泄漏到全局 - 未被
@include的混入代码会被 Sass 编译器自动剔除，减小 CSS 体积 - IDE（如 VS Code）能准确跳转到
grid.$gap-sm的定义处，@import下基本不可追溯
@mixin 封装布局逻辑时，参数设计要贴近真实使用场景
别写万能但难用的 @mixin pos($t, $r, $b, $l)，实际开发中 90% 的绝对定位只设一两个方向。按高频场景拆分更实用：
-
@mixin pos-top-right($top: auto, $right: auto)—— 用于关闭按钮、角标 -
@mixin pos-center—— 内部自动组合top: 50%; left: 50%; transform: translate(-50%, -50%)，避免每次手算 -
@mixin flex-center配合@content，让调用者决定子元素样式，而非硬编码结构
注意：@content 运行在调用者作用域，和 mixin 内部参数不互通。想控制子项 margin？得在 mixin 里显式写 & > * { margin: $gap; @content; }，而不是指望 @content 自己读取参数。
布局模板的目录结构必须分层且无语义污染
layout/ 目录下只放容器关系类文件，例如 _grid.scss、_container.scss、_aspect-ratio.scss，禁止出现 _button.scss 或 _card.scss 这类带组件语义的文件。
原因很直接：布局是骨架，组件是血肉。把 max-width 和 padding 塞进 _button.scss，等于把容器逻辑和交互逻辑耦死，换一套设计系统就得重写按钮——而抽离到 layout/_container.scss 后，只需改一处，所有用到该容器的组件自动适配。
- 禁用
@extend：它会把选择器拼接进调用处，造成不可预测的权重膨胀和选择器爆炸 - 所有布局混入必须用
@include显式调用，确保依赖可见、可删、可测 - 断点值统一由
abstracts/_breakpoints.scss提供，布局 mixin 内只引用breakpoint-get("md")，不硬编码像素值
响应式布局必须在 mixin 内部嵌套 @media，而不是外部重复调用
看到有人为每个断点写一遍 @include grid-cols(2)、@include grid-cols(3)？CSS 体积翻倍，逻辑分散，改个列数得改三处。
正确做法是在混入里收口：
@mixin grid-responsive-cols($base: 1, $md: 2, $lg: 3) {
grid-template-columns: repeat($base, 1fr);
@media (min-width: breakpoint-get("md")) {
grid-template-columns: repeat($md, 1fr);
}
@media (min-width: breakpoint-get("lg")) {
grid-template-columns: repeat($lg, 1fr);
}
}
关键点：
- 断点函数
breakpoint-get()必须是你自己定义的（非 Sass 内置），返回像素值，便于和 JS 侧共享 - 避免用
max-width断点，小屏设备文字过窄时强行分栏反而降低可读性 - 不要在 mixin 里用
map-get动态查断点——Sass 编译期无法运行时计算，必须提前展开
真正难的不是写几个 @mixin，而是守住「布局只管容器关系」这条线。一旦开始在 _grid.scss 里塞 color: $color-primary 或 border-radius: $radius-lg，抽象层就塌了——后面所有人调用这个模板，都会被悄悄带上主题细节，再也没法干净复用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
