为什么@content不能直接用在普通Mixin里就报错
因为@content必须配合@include调用时传入的代码块，它本身不是变量也不是返回值，而是一个“占位注入点”。如果Mixin定义里写了@content，但调用时没带花括号包裹的内容，sass编译器会直接抛错：Content block not provided。
- 只在声明Mixin时写
@content没用，必须和@include my-mixin { ... }配对使用 - 不支持嵌套多层
@content（比如A mixin包含B mixin，B里再用@content），Sass只认最外层调用时传入的那一块 - 不能用
@content做条件判断或循环，它只是原样插入，不参与逻辑计算
用@content封装响应式断点Mixin的实际写法
典型场景是把媒体查询逻辑收进Mixin，让使用者专注写具体样式，而不是反复敲@media (min-width: 768px)。关键在于：断点值要可配，内容要可变，且不污染外部作用域。
- 定义时用参数接收断点，用
@content承接样式块：@mixin for-size($breakpoint) { @if $breakpoint == sm { @media (min-width: 480px) { @content; } } @else if $breakpoint == md { @media (min-width: 768px) { @content; } } } - 调用时必须带花括号：
@include for-size(md) { font-size: 1.2rem; padding: 1rem; } - 别把
@content和@extend混用——@extend在@content块里可能触发未预期的继承链，尤其跨文件时
@content和参数混合使用的边界在哪
你可以把参数和@content一起用，但要注意作用域隔离：参数在Mixin内部生效，@content里的代码仍运行在调用者的作用域中，访问不到Mixin内部声明的变量。
- 能做的：用参数控制是否包裹某层容器，再把
@content塞进去@mixin with-wrapper($has-border: false) { @if $has-border { border: 1px solid #ccc; } > * { @content; } // 这里的*作用于调用处的父选择器 } - 不能做的：在
@content里直接用Mixin内部的临时变量，比如$temp: 10px; @content;→ 调用方无法访问$temp - 性能提示：每个
@include调用都会生成一份独立css，大量嵌套@content可能让输出体积膨胀，特别是配合循环时
当@content遇上CSS自定义属性和计算函数
现代css布局常依赖calc()和var(--x)，而@content能干净地透传这些，但要注意Sass编译时机——它不解析CSS运行时行为，只做字符串拼接。
立即学习“前端免费学习笔记（深入）”；
- 安全写法：直接写
width: calc(100% - var(--gap));，Sass原样输出，交给浏览器计算 - 危险写法：试图在
@content里用Sass的calc()函数（如calc(100% - $gap)），这会触发Sass提前计算，而$gap若来自调用方上下文，可能未定义 - 兼容性注意：IE不支持
calc()嵌套或某些单位组合（如calc(1rem - 2px)），@content不会帮你降级，得靠额外工具链处理
真正难的不是语法，是判断哪些逻辑该放进Mixin参数，哪些必须留给@content——前者决定结构，后者决定表现，一碰就容易越界。