@content必须配合@include mixin-name { }大括号调用才能生效，因它是编译器识别的“内容块插入点”，分号终止调用会导致@content收不到内容而生成空规则；正确结构应将@media与@content直接嵌套，透传调用处的&、嵌套层级和选择器前缀。
为什么@content调用不带大括号就失效
@content不是变量，也不是函数返回值，它是Sass编译器识别的“内容块插入点”，只在 @include mixin-name { } 这种语法下被激活。写成 @include layout-flex; 或 @include respond-to(sm); color: red;，分号会提前终止调用，@content 收不到任何内容，编译器直接报错 Content block not provided 或静默生成空规则——样式消失但无明显提示。
怎么写一个能透传嵌套上下文的响应式mixin
关键不是把断点逻辑写多复杂，而是确保调用处的 &、嵌套层级、选择器前缀原样透传。例如在 .card 下调用 &__header，里面写的 h2 必须编译为 .card__header h2，而不是孤立的 h2。
- ✅ 正确结构：
@mixin respond-to($bp) { @media (min-width: map-get($breakpoints, $bp)) { @content; } } - ❌ 错误结构：
@mixin respond-to($bp) { @media () { .card { @content; } } }—— 强行加.card，破坏调用灵活性 - 调用时必须对齐缩进：
@include respond-to(md) { img { width: 100%; } }，否则可能意外嵌套成.card .card img
@content和参数混用时的作用域隔离问题
参数在mixin内部作用域生效，@content 中的代码却始终运行在调用者作用域——两者变量完全不互通。这不是bug，是设计使然。
- ✅ 能做的：用参数控制是否启用某层包装，再把
@content塞进去，例如@mixin with-gap($size: 1rem) { gap: $size; @content; } - ❌ 不能做的：在mixin里声明
$temp: 20px;，然后指望@content里能用width: $temp;—— 它根本访问不到 - 想“传值”给
@content？不行。替代方案是定义带参数的子mixin，在@content里@include它
哪些操作会让@content直接崩溃或生成无效CSS
@content 的能力边界非常清晰，越界使用几乎必然失败，且错误信息常不直观。
立即学习“前端免费学习笔记（深入）”；
- 禁止在
@content块里用@extend—— 编译时报错Invalid CSS after "@extend": expected selector - 禁止用变量存样式字符串再注入：
$style: "color: red;"; @include foo { #{$style} }→ 输出纯文本color: red;，不编译、不继承作用域 - 一个mixin里只能有一个
@content，且必须出现在参数声明之后、其他语句之前；不支持递归（即@content块里再@include另一个含@content的mixin）
真正难的从来不是语法本身，而是判断什么时候该让调用者决定结构，什么时候该在mixin里预埋容器——这个责任边界一旦模糊，@content 就会从利器变成隐患。
