@content 是编译期单次展开的内容占位符，仅在 @include 后加大括号时注入，不支持变量、递归或字符串解析，必须严格遵循语法才能正确继承调用者作用域。
@content 不是插槽 API，也不是运行时机制，它只在 @include 后加大括号时才被注入，且仅发生一次编译期展开。 想靠它实现“动态样式插槽”或“条件式内容替换”会直接失败——它不接收变量、不支持递归、不解析字符串，只做原样块插入。
为什么 @content 调用必须带大括号，否则编译报错
因为 @content 是编译器识别的“内容占位符”，不是函数参数。Sass 只在 @include my-mixin { ... } 这种语法下，才把花括号内整个 SCSS 块（含嵌套、& 引用、声明）原样塞进 @content 位置。
- 写成
@include layout-flex;→@content为空，编译器报错：Content block not provided - 写成
@include layout-flex { width: 100%; }✅ → 编译后生成完整规则，&仍指向调用处父选择器 - 写成
@include layout-flex; { width: 100%; }❌ → 分号提前终止@include，后面代码变成孤立块，不进媒体查询也不进布局容器
如何用 @content 封装 Flex/Grid 布局但保留嵌套上下文
关键不是“封装布局属性”，而是让调用者写的子选择器自动继承父级作用域。比如在 .card 下调用，&__header 必须编译为 .card__header，而不是 __header。
- Mixin 内部不能包裹额外选择器：
.wrapper { @content; }会强制加一层，破坏调用灵活性 - 正确写法是直接在规则体里放
@content：display: flex; flex-wrap: wrap; @content; - 若需控制子元素行为（如统一
> *样式），应在 mixin 中显式写出结构：> * { 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 的生效完全依赖调用语法的精确性——少一个空格、多一个分号、漏掉大括号，结果就是样式消失或编译失败，且错误提示往往不指向根本原因。
