@content 是编译期单次插入占位符，必须配合 @include mixin-name { } 大括号调用才生效；当用作参数、变量或运行时插槽时必然编译失败或生成无效 CSS。
直接说结论：@content 不是用来“传递内容”的，它是编译期单次插入的占位符，必须配合 @include mixin-name { } 大括号调用才生效；把它当参数、变量或运行时插槽用，100% 编译失败或生成无效 CSS。
为什么 @content 调用不带大括号就报错
@content 是 Sass 编译器识别的语法标记，不是函数参数。它只在 @include 后紧跟 { } 时，才把花括号内整块已解析的 SCSS（含嵌套、&、变量引用）原样塞进去。
- 写成
@include layout-flex;→@content为空，报错：Content block not provided - 写成
@include layout-flex; { color: red; }→ 分号提前终止调用，后面代码变成孤立块，不进布局容器 - ✅ 正确写法：
@include layout-flex { width: 100%; }，此时&仍指向调用处父选择器（如.card）
怎么用 @content 封装 Flex/Grid 布局但保留嵌套上下文
关键不是“封装属性”，而是让调用者写的子选择器自动继承父级作用域。比如在 .card 下调用 &__header，必须编译为 .card__header，而不是孤立的 __header。
- ❌ 错误：在 mixin 内加包装选择器，如
.wrapper { @content; }→ 强制多一层，破坏灵活性 - ✅ 正确：直接在规则体里放
@content，例如：display: flex; flex-wrap: wrap; @content; - 若需统一控制子元素（如所有直接子项加 margin），显式写出结构：
> * { margin: 0.5rem; @content; }，此时@content插入到> *内部 - ⚠️ 禁止在
@content块里用@extend—— 编译时报错：Invalid CSS after "@extend": expected selector
@content 和参数混用时的作用域陷阱
参数在 mixin 内部生效，@content 中的代码却始终运行在调用者作用域，二者变量完全隔离。
立即学习“前端免费学习笔记（深入）”；
- ✅ 能做的：用参数控制是否启用某层包装，再把
@content塞进去，例如：@mixin with-gap($size: 1rem) { gap: $size; @content; } - ❌ 不能做的：在 mixin 内声明
$temp: 20px;，然后指望@content里能用width: $temp;—— 它访问不到 - 想传值给
@content？不行。替代方案是定义带参数的子 mixin，在@content里@include它 - 性能注意：每个
@include都生成独立 CSS；大量组合（如@each+@content）会让输出体积激增，慎用于断点循环
真正容易被忽略的是：@content 的生效完全依赖调用语法 —— 少一个大括号、多一个分号、缩进错位，都可能导致样式消失而不报明显错误。
