@content 只在 @include 后加大括号时生效，是编译期内容插入点；必须配合大括号使用，否则被忽略；不支持递归、@extend、变量字符串注入及多个实例。
@content 不是传参，也不是字符串拼接，它只在 @include 后加大括号时才生效——没大括号，@content 就被忽略，样式不会进媒体查询里。
为什么 @content 必须配合大括号调用
@content 是编译期“内容块插入点”，不是运行时值。Sass 只在 @include mixin-name { ... } 这种语法下，才会把花括号里的整个 SCSS 块原样塞进 @content 位置。
- 写成
@include respond-to(sm); color: red;→@content为空，媒体查询里什么都没有 - 写成
@include respond-to(sm) { color: red; }✅ →color: red;被注入到@media (min-width: 768px)内部 - 如果在
@content块里再@include另一个带@content的 mixin（比如嵌套调用respond-to+hover-state），外层媒体规则会丢失——Sass 不支持递归解析@content
如何用 @content 封装断点并保持选择器上下文
关键不是“写断点”，而是让调用处的嵌套结构自动透传。比如你在 .card 下写 &:hover，编译后必须是 .card:hover，而不是孤立的 :hover。
- 定义断点 map：
$breakpoints: (sm: 768px, md: 992px, lg: 1200px); - mixin 必须用
@if map-has-key(...)校验键存在，避免编译报错 - 媒体查询内部直接放
@content，不加额外选择器——父级选择器（如.card）由调用位置决定 - 错误示范：
@mixin respond-to($bp) { @media (...) { .card { @content; } } }→ 强行加了.card，破坏调用灵活性
@content 不能干的事：别踩这三类坑
它能力明确，边界也清晰。越界使用只会导致编译失败或生成无效 CSS。
立即学习“前端免费学习笔记（深入）”；
-
@extend不能出现在@content块里——@extend需要编译期确定目标选择器，而@content是延迟注入，时机冲突 - 不能用变量存样式再“传给”
@content，比如$style: "color: red;"; @include foo { #{$style} }→ 字符串不会被编译，只是字面量输出 - 不支持多个
@content；Sass 规定一个 mixin 里只能有一个，且必须出现在参数声明之后、其他语句之前
真正难的是设计 mixin 的“责任边界”：什么时候该让调用者控制结构，什么时候该在 mixin 里预埋容器？@content 的价值不在语法多炫，而在迫使你把“固定逻辑”和“可变内容”切开——一旦这个分界模糊了，后续维护成本就会指数上升。
