@content是SCSS混入中接收调用方样式的占位符，非独立指令；必须置于@mixin内已设好上下文的嵌套块中，如flex-center里display: flex之后，且不可单独使用或错放层级。
SCSS中@content不是指令，是混入的占位符
很多人搜“@content指令”会走偏——它根本不是独立语法或命令，而是@mixin定义里用来接收调用方传入样式的占位符。误以为它是“指令”，容易在写法上漏掉@include调用，或者错放在非混入上下文中，导致编译报错SassError: @content may only be used within a mixin。
真正起作用的是混入本身：@mixin flex-center { ... @content; }，而@content只是把调用时大括号里的样式“插进去”。它不执行逻辑、不接受参数、不能单独存在。
封装flex-center混入时，@content该放哪儿
典型错误是把@content写在容器样式外层，或和display: flex平级，结果居中失效。正确做法是让它嵌套在已设置好flex上下文的块内：
@mixin flex-center($direction: row) {
display: flex;
flex-direction: $direction;
justify-content: center;
align-items: center;
@content; // ← 这里！让调用方可以追加额外样式，比如 gap 或 margin
}
调用时：
.header {
@include flex-center(row);
gap: 1rem;
padding: vh(16) vw(24);
}
这样既复用了居中逻辑，又保留了定制空间。如果把@content提到display: flex之前，子元素就无法继承flex上下文，justify-content会失效。
为什么不用@extend替代@content封装弹性布局
@extend适合复用已有类名的整套样式，但弹性布局往往需要动态控制方向、对齐方式或响应式断点——这些都得靠参数传递，@extend做不到。
-
@extend无法接收参数，$direction这种变量会直接报错 - 多个
@extend叠加时，选择器特指度（specificity）可能意外升高，覆盖预期样式 - 调试时看不到混入展开后的实际CSS，而
@mixin+@content生成的代码清晰可读 - 想在某个组件里临时禁用
align-items？用@content可以覆盖；用@extend只能重写整条规则
容易被忽略的坑：嵌套层级与@content作用域
@content插入的位置决定了它的CSS作用域。如果混入内部用了&__item这类BEM嵌套，而@content写在外部，调用方传入的.btn就会变成.container .btn，而不是期望的.container__btn。
例如这个错误写法：
@mixin flex-list {
display: flex;
flex-wrap: wrap;
@content; // ← 此处@content在顶层，.item不会自动带上父选择器
&__item { flex: 1 1 200px; }
}
正确做法是把@content放进嵌套结构里：
@mixin flex-list {
display: flex;
flex-wrap: wrap;
&__item {
flex: 1 1 200px;
@content; // ← 这样.item才能继承调用方传入的样式
}
}
复杂布局中，@content的位置必须和目标选择器层级严格对应，否则样式会“飘”到意料之外的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
