@content 是响应式 mixin 的关键，因为它使 mixin 能作为样式容器接收并嵌入调用处的 css 块到 @media 中，避免重复书写断点或字符串拼接，确保嵌套上下文正确、编译期展开且无运行时开销。
为什么 @content 是写响应式 mixin 的关键
因为纯 CSS 无法把一整块样式“传进去”再塞进 @media 里，而 Sass 的 @content 就是干这个的——它让 mixin 变成“容器”，而不是“拼接器”。不用它的话，你只能反复写 @media (min-width: 768px) { ... }，或者用字符串拼接（#{...}），那既难读又没法做嵌套检查。
常见错误现象：@include responsive-md { color: red; } 写完却没生效，其实是 mixin 里漏了 @content，或者调用时多写了分号、用了 = 而不是 @include。
-
@mixin responsive-md { @media (min-width: 768px) { @content; } }—— 正确结构，@content必须在规则体内，且不能带括号 - 调用必须用
@include responsive-md { ... }，大括号内写样式，不能加; - 不支持嵌套
@content（比如在@content里再写@include并传另一段@content），Sass 不递归解析
怎么用 @content 实现多断点 + 嵌套选择器
真正省事的地方在于：它能保留调用处的嵌套上下文。比如你在 .card 里调用，里面写的 img 就自动变成 .card img，不用手动拼前缀。
使用场景：组件级响应式（如按钮、卡片、表单控件），而不是全站统一断点。
立即学习“前端免费学习笔记（深入）”；
- 断点参数建议用 map 传入，避免硬编码：
@mixin responsive($breakpoints: (sm: 576px, md: 768px, lg: 992px)) { @each $name, $width in $breakpoints { @media (min-width: $width) { @content; } } } - 嵌套时注意：如果调用位置是
&__header，@content里的h2会编译为&__header h2，但&.active会变成&__header.active，逻辑一致 - 性能影响极小——Sass 编译期展开，不增加运行时开销；但断点过多（比如 10+）会让 CSS 体积明显上涨，慎用“每个像素都设一个断点”
@content 和 @extend 混用会出什么问题
会报错或生成无效 CSS：Sass 不允许在 @content 里直接用 @extend，因为 @extend 需要编译期确定目标选择器，而 @content 是“延迟注入”，时机对不上。
错误信息：Invalid CSS after "@extend": expected selector, was ";" 或更隐晦的 “undefined mixin” 报错（实际是语法解析失败）。
- 替代方案：把需要
@extend的样式抽成单独 class，然后在@content里用类名组合，比如.btn .btn--primary - 如果真要复用样式逻辑，改用
@include引入另一个 mixin，它内部可以安全用@extend - 兼容性注意：旧版 Sass（@content 支持不稳，遇到莫名丢失内容，先升级到 Dart Sass
为什么别在 @content 里写变量声明或 @import
因为 @content 只接受样式声明（ruleset），不接受指令（at-rules）或变量赋值。写进去不会报错，但会被忽略或导致编译中断。
容易踩的坑：以为能“动态定义变量再用”，比如在 @content 里写 $color: blue;，结果后面 color: $color 报 Undefined variable。
-
@content中只允许：属性声明（color: red;）、嵌套规则（img { width: 100%; }）、@supports等合法 at-rules（但不包括@import、@use、@forward） - 变量必须在调用前定义好，或通过 mixin 参数传入：
@mixin responsive-md($color: red) { @media (min-width: 768px) { @content; } }，然后调用时用@include responsive-md(blue) { color: $color; } - 路径和配置项如
../base/_vars.scss必须在顶层@use，不能塞进@content
@content 是“执行代码”，其实它只是“复制粘贴样式块”，所有作用域、变量、依赖都得在调用前准备好。 
