不能用 @function 封装盒模型逻辑，因其仅支持返回字符串、数字或颜色，无法生成选择器和声明；而 @mixin 支持嵌套、参数及 @content 注入，适合封装完整 CSS 规则块。
为什么不能用 @function 封装盒模型逻辑
盒模型涉及的是完整 CSS 规则块（比如 box-sizing: border-box、display: flex、flex-wrap: wrap 等组合），不是返回一个值。@function 只能输出字符串、数字或颜色，无法生成选择器和声明对；而 @mixin 是样式模板，天然支持嵌套、参数、@content 注入，才能把“容器 + 子项 + 断点响应”一整套逻辑打包复用。
如何定义 adaptive-box mixin 并控制 display 类型
别写死 display: flex 或 display: grid —— 不同场景需要不同布局基底。实操建议：
- 用
$layout参数接收flex、grid、block，默认为flex - 当
$layout: grid时，自动注入grid-template-columns和gap参数，但不强制写死列数，留空由调用方传入 - 当
$layout: flex时，默认加flex-wrap: wrap和align-items: stretch，避免子项高度塌陷 - 所有参数都设默认值，比如
$gap: 1rem、$align: stretch，降低调用门槛
响应式断点必须用 @content 注入，不能写死 @media
常见错误是把 @media (min-width: 768px) 直接塞进 mixin 体里，结果所有调用处都被强制套上同一套断点，无法按需覆盖。正确做法是让断点逻辑外置：
- mixin 内只定义基础层（如移动端默认样式）
- 用
@content预留插槽，让调用方决定何时、如何加断点 - 示例调用：
.card-grid { @include adaptive-box($layout: grid, $gap: 1.5rem); @media (min-width: 1024px) { @include adaptive-box($layout: grid, $gap: 2rem); } } - 这样既保持 mixin 轻量，又避免断点作用域污染（比如不会把
@media提升到全局）
box-sizing 必须单独封装，且不可省略 * { box-sizing: border-box } 全局重置
仅靠 mixin 里写 box-sizing: border-box 不够——它只作用于当前选择器，子元素仍可能继承 content-box，尤其在第三方组件或 iframe 嵌入时出问题。所以：
- 定义独立的
reset-box-modelmixin，只做一件事：*, *::before, *::after { box-sizing: border-box; } - 这个 reset 必须在所有样式最顶部
@include reset-box-model，不能依赖组件级 mixin - 不要试图用
@if $border-box == true控制是否开启——box-sizing 是基础约束，不是可选项 - 注意：Sass 编译后，
*选择器权重低，但它是语义必需的；若项目已用 CSS Reset 或 Normalize，需确认它们是否已包含该规则
真正容易被忽略的是：自适应盒模型不是“一套配置打天下”。adaptive-box 的价值不在封装多，而在暴露少——只暴露你真正在意的维度（布局类型、间隙、对齐），其余全交由 @content 或外部断点接管。否则，很快就会变成另一个难以调试的“万能 but 不好用” mixin。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
