@mixin是唯一能包裹@media、&:hover::before和@content的复用机制；@extend无法跨媒体继承或处理伪元素，CSS变量仅替换值而不生成规则结构。
直接用 @mixin 封装样式块是最稳妥、最可控的复用方式，它不污染选择器层级，支持参数和动态逻辑，比 @extend 和 CSS 自定义属性更适配“一组有内在关联的声明”场景。
什么时候必须用 @mixin 而不是 @extend 或 CSS 变量
@mixin 是唯一能包裹 @media、&:hover::before、@content 插槽的机制；@extend 无法跨媒体查询继承，也不能嵌套伪元素；CSS 变量只替换值，不生成规则结构。
- 需要在响应式断点内包裹整套 flex 布局？→ 必须用
@mixin - 要给卡片加统一 padding + border + 自定义
::after装饰？→@extend会丢掉伪元素，@mixin可原样展开 - 只是换背景色？优先用
--bg-color；但若同时改color、border、transition和焦点态阴影？→@mixin更紧凑
@mixin 定义时怎么避免参数传错导致编译失败
SCSS 不做运行时类型校验，传字符串当数值、漏参数、或把 map 当 color 都可能报模糊错误（比如 "Invalid null operation"）。
- 数值运算前加
@if type-of($val) == 'number'判断，配合@warn提示 - 别在
@mixin内写@import或@use——它们应在顶层管理，否则作用域不可见或重复导入 - 慎用父选择器
&：除非明确需要指向调用处的父级，否则易生成意外选择器（如.form &__input变成.form .form__input）
带响应式或主题切换的 @mixin 怎么设计才不硬编码
硬写 @media (min-width: 768px) 或 background: #007bff 会让 mixin 失去复用性。关键在于“解耦控制权”。
立即学习“前端免费学习笔记（深入）”；
- 断点用变量键名传入：
@mixin grid-cols($count, $breakpoint: null)，内部查map-get($breakpoints, $breakpoint) - 颜色走 CSS 变量：
background-color: var(--btn-bg, #007bff)，Sass mixin 只管结构和过渡 - 尺寸分级用 map：
$form-sizes: (sm: (p: 4px 8px, fs: 12px))，避免 if/else 判断
为什么 @content 是高级封装绕不开的点
当你要封装容器类（如模态框、卡片、提示框），且需允许调用方注入自定义内容时，@content 是唯一方案——它不是参数，而是 SCSS 的“代码插槽”。
- 定义：
@mixin card-layout { padding: 1rem; @content; } - 调用：
@include card-layout { color: red; font-weight: bold; }→ 输出完整规则块 - 没它的话，你只能靠
@extend拼 class，或手动写两层结构，状态和嵌套都难统一
真正容易被忽略的是作用域边界：mixin 内部不该假设外部结构，也不该试图接管 HTML 属性（如 tabindex 或 inert）；它只负责样式规则的生成与组合。复杂交互逻辑（如焦点捕获、动画触发）应由 JS 控制，Sass 只提供可预测、可覆盖的 CSS 接口。
