必须用 @use 而非 @import，因其强制命名空间、避免变量覆盖、支持按需编译与 ide 智能提示；layout/ 应仅含结构逻辑如栅格、容器、flex 工具，禁放语义组件；栅格生成须防整数除法、循环边界及响应式嵌套冗余。
直接用 @use 搭配抽象层（abstracts/）和布局层（layout/），是当前最可控、最易维护的 Sass 布局系统定制路径。其他方式要么污染作用域，要么无法按需剔除代码。
为什么必须用 @use 而不是 @import
@import 会把所有变量、混入无差别注入全局，一旦两个文件都定义了 $spacing-sm，后引入的那个就静默覆盖前一个——你改了个间距，整个导航栏和卡片突然错位，却找不到源头。
-
@use强制命名空间：比如@use 'abstracts/variables' as vars，调用时必须写vars.$spacing-sm，谁改了谁负责 - 未使用的变量和混入在编译时自动丢弃，CSS 体积更小
- IDE 能跳转、能提示、能校验拼写，
@import下这些能力基本失效
layout/ 目录里只放容器关系逻辑
很多人把 _header.scss、_modal.scss 塞进 layout/，结果越改越重，最后变成“什么都往里扔”的垃圾箱。真正的布局层只处理结构流式规则：
-
_grid.scss：只含栅格列宽生成逻辑（@for $i from 1 through 12）、@mixin make-col($span)等基础工具，不涉及按钮、表单等语义 -
_container.scss：定义.container在不同断点下的最大宽度和居中行为，不写任何字体或颜色 -
_flex.scss：封装@mixin flex-row()、@mixin flex-center()，但子项样式（如.card的圆角）必须交给组件层
栅格类生成必须避开三个硬坑
用 @for 自动生成 .col-1 到 .col-12 很常见，但稍不注意就会产出无效 CSS 或运行时塌陷：
- 循环必须用
through，不是to：@for $i from 1 through 12才能包含.col-12；to 12只到 11 -
percentage($i / 12)必须写成percentage($i / 12.0)，否则整数除法得 0，所有列宽都是0%，页面内容直接消失，且控制台不报错 - 响应式嵌套必须外层
@each $bp, $val in $breakpoints、内层@for $i from 1 through 12，反着来会让每个列数都重复输出全部断点，12×5=60 条规则，其中大量冗余
变量覆盖必须卡在编译链正确位置
想改 $grid-columns: 24 却没生效？大概率是你把它写在了 @use "bootstrap/scss/bootstrap" 之后，或者混进了某个组件文件里。
- 自定义变量必须出现在
@use "abstracts/functions"和@use "abstracts/variables"之间 - 所有栅格相关变量（
$grid-columns、$gutter、$breakpoints）要统一放在一个_grid-vars.scss中，避免散落在各处 - 别用
@extend复用布局逻辑——它会污染选择器，导致.col-6意外继承.card的边框；一律改用@include调用混入
真正难的不是写出第一版栅格，而是当设计规范从 12 列升级到 24 列时，你还得同步改 percentage 分母、grid-column-start 上限、断点循环范围、文档说明——这些地方一旦漏掉一个，就没人能快速定位问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
