@content 不注入是因为调用时漏了大括号，必须写成 @include mixin-name { ... }，分号结尾或换行都会导致 @content 失效，且 @content 仅透传内容、不解析逻辑、不共享变量作用域。
@content 不注入，几乎一定是调用时漏了大括号 —— 编译器根本没收到内容块，不是 mixin 写错了。
为什么 @include flex-center; 不会触发 @content
@content 不是变量，也不是函数返回值，它是 Sass 编译器识别的“内容插入点”，只在 @include mixin-name { } 这种带花括号的语法下才被激活。写成 @include flex-center;，分号直接终止调用，@content 位置收不到任何东西，编译器要么报错 Content block not provided，要么静默生成空规则（样式消失但无提示）。
常见错误现象：
- 调用后样式看起来“没生效”，比如媒体查询里空空如也、容器内没子样式
- 误以为 mixin 定义有问题，反复检查
@content位置，其实问题在调用端 - 把
&__title写在@include后面另起一行 → 它脱离上下文，编译成孤立选择器，不嵌套进父级
@content 调用必须严格匹配语法结构
正确写法只有一个模式：@include mixin-name { ... }，且大括号必须紧贴 @include 行末，不能换行或加空格分隔。
立即学习“前端免费学习笔记（深入）”；
可接受的调用方式：
-
@include responsive-layout { &__header { color: red; } }✅ ——&正确继承.card上下文 -
@include with-gap(1rem) { > * { margin: 0.5rem; } }✅ ——@content插入到 mixin 规则体内部
不可接受的写法：
-
@include responsive-layout;❌ —— 分号终结，@content被跳过 -
@include responsive-layout {换行再写内容 ❌ —— Sass 不支持跨行大括号解析 -
@include responsive-layout { width: 100%; } .card__body { ... }❌ —— 后续代码不在@content块内，完全脱离 mixin 控制
@content 里能写什么、不能写什么
@content 是原样透传，不是执行环境。它把大括号里的 SCSS 代码块完整塞进 @content 位置，但不参与逻辑解析。
允许写：
- 嵌套选择器（
&:hover、&__title） - 属性声明（
color: red;、width: calc(100% - #{$gap});） - CSS 原生函数（
var(--primary)、linear-gradient(...)）
禁止写：
-
@extend—— 编译报错Invalid CSS after "@extend": expected selector -
@if/@for——@content不解析逻辑，整块当普通 CSS 输出 - 变量插值字符串（
#{$style}）—— 只输出字面量，不编译、不继承作用域 - 在同一个 mixin 里多次出现
@content—— 语法错误，只允许一个
最容易被忽略的细节：作用域隔离和位置硬性要求
参数在 mixin 内部作用域生效，@content 里的代码却始终运行在调用者作用域 —— 二者变量完全不互通。你在 mixin 里声明的 $temp: 20px，@content 块里根本访问不到。
@content 必须出现在 mixin 定义中：参数声明之后、其他语句之前。放错位置（比如写在 display: flex 后面又写了 flex-direction: row），会导致编译失败。
真正难的从来不是语法本身，而是判断什么时候该让调用者决定结构，什么时候该在 mixin 里预埋逻辑 —— 而这个边界，全靠 @include 后那一对标记内容块的花括号来划清。
