@content不是生成复杂CSS的工具，而是编译期透传嵌套上下文的占位符，仅在@include mixin-name { }中生效，内容原样插入不解析、不拼接、不传参。
直接说结论：@content 不是“生成复杂 CSS”的工具，它是编译期透传嵌套上下文的占位符，只在 @include mixin-name { } 语法下生效，且内容块必须原样插入、不解析、不拼接、不传参——想靠它动态生成选择器或条件样式，会失败。
为什么@content调用必须带大括号，否则报错“Content block not provided”
@content 是 Sass 编译器识别的硬性语法标记，不是函数参数。它只在 @include 后紧跟 { } 时，才把花括号内整个 SCSS 片段（含嵌套、&、声明）原样塞进定义位置。
-
@include flex-center;→@content为空，编译器直接报错 -
@include flex-center { &__title { font-size: 1.2rem; } }✅ →&仍指向调用处父选择器（如.card），最终输出.card__title -
@include flex-center; { color: red; }❌ → 分号提前终止@include，后面代码变成孤立块，既不进 mixin 也不进媒体查询
如何用@content封装媒体查询并保留调用处的选择器上下文
关键不是“写断点”，而是让 @content 插入的位置不包裹额外选择器，从而继承调用处的嵌套层级和 & 引用。
- 正确写法：
@mixin respond-to($bp) { @media (min-width: map-get($breakpoints, $bp)) { @content; } } - 错误写法：
@mixin respond-to($bp) { @media () { .wrapper { @content; } } }→ 强行加了一层.wrapper，破坏灵活性 - 调用位置有
&.active，@content中的color: red就编译为&.active { color: red; } - 缩进不一致（比如
{后换行但没缩进）可能触发意外嵌套，导致生成.card .card img这类重复前缀
@content和参数、@extend、变量字符串混用时的典型崩溃点
@content 的作用域和生命周期与其他机制完全不兼容，混用会直接报错或产出无效 CSS。
立即学习“前端免费学习笔记（深入）”；
- 参数在 mixin 内部生效，
@content中的代码却运行在调用者作用域 ——$temp: 20px;声明后，@content里不能用width: $temp -
@include responsive-md { @extend .btn-base; }→ 报错Invalid CSS after "@extend": expected selector，因为@extend需编译早期确定目标，而@content是延迟注入 -
$style: "color: red;"; @include foo { #{$style} }→ 输出字面量color: red;，不参与样式编译，也不继承作用域 - 想“传值”给
@content？不行。替代方案是定义带参数的子 mixin，在@content里@include它
真正容易被忽略的是：@content 的生效完全依赖调用方式 —— 它不关心你写了什么逻辑，只认 @include mixin-name { } 这个语法结构；一旦缩进错、分号多、括号漏，就静默失效或报错，且问题常藏在嵌套深处，DevTools 里看不出异常。
