@include后不加大括号会导致@content失效，因其仅在@include mixin-name { ... }语法下被识别；无大括号时编译器跳过@content，造成内容未注入、样式丢失，报错“Content block not provided”。
为什么@include后面不加大括号，@content就失效
因为@content不是变量也不是返回值，它是编译期的“内容插入点”，只在@include mixin-name { ... }这种带花括号的调用语法下才被识别。Sass 编译器看到没大括号的写法（比如@include flex-center;），直接跳过@content，什么也不注入——结果就是媒体查询空着、布局容器里没子样式、整个组件看起来“没生效”。
- ✅ 正确：
@include flex-center { &__title { font-size: 1.5rem; } } - ❌ 错误：
@include flex-center; &__title { font-size: 1.5rem; }→&__title会跑到外层作用域，破坏嵌套结构 - 编译报错提示通常是：
Content block not provided，而不是语法错误，容易误判为 mixin 定义问题
@content里能写什么、不能写什么
@content是原样透传，不是执行环境。它把花括号里的 SCSS 代码块完整塞进 mixin 定义里的@content位置，但不参与逻辑解析。
- ✅ 允许：嵌套选择器（
&:hover）、属性声明（color: red;）、calc()和var(--x)等原生 CSS 表达式 - ❌ 禁止：
@extend（编译期无法确定目标选择器）、@if/@for（@content不解析逻辑）、变量插值字符串（#{$style}只是输出字面量，不会被编译） - ⚠️ 特别注意：
@content只能出现一次，且必须在 mixin 参数声明之后、其他语句之前；放错位置会导致编译失败
如何让&在@content中正确继承父选择器
关键不在 mixin 定义里加选择器，而在调用时保持上下文。比如你希望.card { @include responsive-layout { &__body { padding: 1rem; } } }编译出.card__body，而不是孤立的__body。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- mixin 内部不要包裹额外选择器：
@mixin responsive-layout { @media (min-width: 768px) { @content; } }✅ - 错误示范：
@mixin responsive-layout { @media (min-width: 768px) { .card { @content; } } }❌ —— 强制限定选择器，失去复用性 - 调用处的
&始终指向@include所在的作用域，所以.card { @include ... { &__header { ... } } }才能生成正确的后代选择器
参数和@content混用时的作用域陷阱
参数在 mixin 内部作用域生效，@content里的代码却运行在调用者作用域——二者变量完全隔离。
立即学习“前端免费学习笔记（深入）”；
- ✅ 可行：
@mixin with-gap($gap: 0.5rem) { > * { margin: $gap; @content; } }→$gap用于控制包装层，@content插入到> *内部 - ❌ 不可行：
@mixin with-temp { $temp: 12px; @content; }→ 调用方在@content块里写width: $temp;会报错：变量未定义 - 性能提醒：每个
@include都会生成独立 CSS 块，大量使用嵌套@content（尤其配合@each循环）可能显著增大输出体积
真正难的是让@content既灵活又可控——它不帮你做判断、不帮你计算、不帮你继承，只忠实地搬运。写错一行位置、漏一个花括号、多一层选择器，结果就全偏了。
