@content 是 sass 中必须配合 @include mixin-name { } 大括号调用的硬性机制，漏掉大括号则样式消失且无报错；它透传调用处上下文，不共享 mixin 内变量，禁止在其中使用 @extend、控制指令，且一个 mixin 仅允许一个 @content。
@content 不是语法糖，它是 Sass 编译器识别“内容块插入点”的硬性机制，必须配合 @include mixin-name { } 大括号调用才生效；漏掉大括号或放错位置，样式直接消失且无明显报错。
为什么 @include respond-to(md) 后不加大括号就失效
因为 @content 不是变量、不是函数返回值，它只在 @include mixin-name { } 这一特定语法下被编译器激活。写成 @include respond-to(md); color: red;，分号提前终止调用，@content 收不到任何内容，结果就是媒体查询规则体为空——浏览器里查不到对应样式，控制台也不报错，只默默失效。
常见错误现象：
- 响应式断点写了但页面没反应
- 卡片容器的内边距和边框正常，但子元素样式完全没渲染
- 编译输出中出现空
@media块：@media (min-width: 768px) { }
怎样让 & 在 @content 中正确继承父选择器
关键不是在 mixin 内部加选择器，而是保持调用处的嵌套上下文原样透传。例如你希望 .card { @include responsive-layout { &__body { padding: 1rem; } } } 编译出 .card__body，而不是孤立的 __body。
正确结构：
-
@mixin responsive-layout($bp) { @media (min-width: map-get($breakpoints, $bp)) { @content; } }✅ - 调用时缩进对齐：
@include responsive-layout(md) { &__header { h2 { margin: 0; } } }
错误结构：
-
@mixin responsive-layout($bp) { @media () { .card { @content; } } }❌ —— 强行包裹破坏复用性 - 调用时换行不缩进，导致
&被解析为.card .card__header这类重复前缀
@content 和参数混用时的作用域隔离问题
参数在 mixin 内部作用域生效，@content 中的代码却始终运行在调用者作用域——两者变量完全不互通。这不是 bug，是设计使然。
不能做的：
- 在 mixin 里声明
$temp: 20px;，然后指望@content里能用width: $temp; - 把样式字符串存进变量再插值：
$style: "color: red;"; @include foo { #{$style} }→ 输出纯文本，不参与编译
可行方案：
- 定义带参数的子 mixin，在
@content里@include它 - 所有需共享的值，显式通过参数传入，或由调用方在外部声明
哪些操作会让 @content 直接崩溃或生成无效 CSS
@content 的能力边界非常清晰，越界使用几乎必然失败，且错误信息常不直观。
- 禁止在
@content块里用@extend→ 报错Invalid CSS after "@extend": expected selector - 禁止用
@if/@for等控制指令 →@content不解析逻辑，只做原样透传 - 一个 mixin 里只能有一个
@content，且必须出现在参数声明之后、其他语句之前 - 不支持递归：即
@content块里再@include另一个含@content的 mixin
真正难的从来不是语法本身，而是判断什么时机该用 @content、什么时机该抽成独立 class 或用 CSS 自定义属性——它只解决「结构包裹 + 内容注入」这一件事，别让它干别的活。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
