@content 是 sass 中的内容占位符，仅用于 @mixin 内部，将调用时传入的 css 块原样插入；它非变量、不参与计算，必须与带大括号的 @include 成对使用，且每个 mixin 中只能出现一次。
什么是 @content，它在混合器里起什么作用？
@content 是 Sass 提供的“内容占位符”，只允许出现在 @mixin 定义体内，用于把调用时传入的 CSS 块原样插入到混合器展开的位置。它不是变量、不参与计算，也不做任何转换——就是字面意义上的“把这儿空出来，等你填”。
常见错误是把它当成参数传递：比如写成 @mixin card($padding) { @content; } 然后以为 @include card(1rem) { color: red; } 能让 $padding 影响 @content 里的样式——其实不能。@content 和参数完全解耦，想联动得靠其他方式（比如配合 @if 或嵌套规则）。
正确写法：定义 + 调用必须成对出现
@content 必须和 @include 的块级调用配对使用。如果调用时不带大括号块，Sass 编译会直接报错：Invalid CSS after "...nclude responsive": expected "{", was ";"。
- 正确调用：
@include responsive { width: 100%; max-width: 1200px; } - 错误调用：
@include responsive;（缺块） - 也错误：
@include responsive() { ... }（加了空括号）
示例混合器：
@mixin responsive {
@media (min-width: 768px) {
@content;
}
}
调用后生成：
@media (min-width: 768px) {
width: 100%;
max-width: 1200px;
}
多个 @content 位置？不行，只能用一次
Sass 不允许在同一个 @mixin 中多次声明 @content，否则编译失败：Only one @content directive may be used inside a mixin.
如果你需要“头尾插入”或“条件插入”，得换思路：
- 用多个独立混合器（如
@mixin with-header+@mixin with-footer） - 或改用参数控制结构（如
@mixin layout($with-sidebar: true)，内部用@if $with-sidebar分支） - 别试图绕过限制把
@content拆开——它天生就是单入口单出口的设计
和嵌套规则混用时要注意作用域
@content 插入的内容会继承混合器所在的作用域，包括父选择器、变量可见性、甚至 & 的上下文。
比如：
.card {
@include responsive {
padding: 1rem;
}
}
会生成：
.card {
@media (min-width: 768px) {
.card {
padding: 1rem;
}
}
}
因为 @content 在 .card 块内被调用，所以它自动被嵌套进 .card 选择器下。如果不想嵌套，得显式重置上下文，比如用 @at-root 包裹部分 @content，但注意：这会让 CSS 输出脱离原本结构，需谨慎评估是否真有必要。
真正容易被忽略的是：@content 的行为完全取决于调用点的嵌套层级，而不是混合器定义的位置——这点和普通参数完全不同。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
