如何利用SCSS的@content指令创建响应式CSS包装器_插槽式开发模式-css教程-PHP中文网

@content 只在 @include 后加大括号时生效，是编译期内容插入点；必须配合大括号使用，否则被忽略；不支持递归、@extend、变量字符串注入及多个实例。

如何利用scss的@content指令创建响应式css包装器_插槽式开发模式

@content 不是传参，也不是字符串拼接，它只在 @include 后加大括号时才生效——没大括号，@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

关键不是“写断点”，而是让调用处的嵌套结构自动透传。比如你在 .card 下写 &:hover，编译后必须是 .card:hover，而不是孤立的 :hover。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

定义断点 map：$breakpoints: (sm: 768px, md: 992px, lg: 1200px);
mixin 必须用 @if map-has-key(...) 校验键存在，避免编译报错
媒体查询内部直接放 @content，不加额外选择器——父级选择器（如 .card）由调用位置决定
错误示范：@mixin respond-to($bp) { @media (...) { .card { @content; } } } → 强行加了 .card，破坏调用灵活性

它能力明确，边界也清晰。越界使用只会导致编译失败或生成无效 CSS。

@extend 不能出现在 @content 块里——@extend 需要编译期确定目标选择器，而 @content 是延迟注入，时机冲突
不能用变量存样式再“传给” @content，比如 $style: "color: red;"; @include foo { #{$style} } → 字符串不会被编译，只是字面量输出
不支持多个 @content；Sass 规定一个 mixin 里只能有一个，且必须出现在参数声明之后、其他语句之前

真正难的是设计 mixin 的“责任边界”：什么时候该让调用者控制结构，什么时候该在 mixin 里预埋容器？@content 的价值不在语法多炫，而在迫使你把“固定逻辑”和“可变内容”切开——一旦这个分界模糊了，后续维护成本就会指数上升。