scss中@mixin用于定义可复用样式块，通过@include调用，支持参数、默认值、命名参数及@content插槽；适合复用逻辑关联的声明组合，优于@extend和css变量的场景包括响应式、主题切换、媒体查询包裹及伪类嵌套。
SCSS中@mixin的基本写法和调用方式
直接用 @mixin 定义样式块，再用 @include 插入，这是最基础的复用手段。它不像 @extend 那样合并选择器，而是原样复制样式规则，适合封装逻辑清晰、参数可变的样式组合。
-
@mixin center-flex{ display: flex; justify-content: center; align-items: center; }，调用时写@include center-flex即可 - 定义带参数的 mixin：
@mixin border-radius($r: 4px){ border-radius: $r; }，调用时可写@include border-radius(8px)或留空用默认值 - 多个参数用逗号分隔，支持可选参数（带默认值）和命名参数调用，比如
@include shadow($x: 0, $y: 2px, $blur: 4px)
什么时候该用@mixin而不是@extend或CSS自定义属性
当你要复用的是「一整组有内在逻辑关联的声明」，且可能随上下文动态变化时，@mixin 是更安全的选择。比如响应式断点、主题色切换、动效组合等场景，@extend 容易污染选择器层级，而 CSS 变量只解决值替换，不解决规则结构复用。
- 需要插入媒体查询时必须用
@mixin——@extend无法跨媒体块继承，CSS 变量也无法控制@media的包裹逻辑 - 涉及伪类或伪元素组合（如
&:hover::before）时，@mixin能保持嵌套结构，@extend会失效 - 如果只是换颜色/尺寸等单一值，优先用 CSS 自定义属性；但要同时改
background、color、border和过渡行为，@mixin更紧凑可控
常见坑：参数类型校验缺失和嵌套作用域混淆
SCSS 不做运行时类型检查，传错参数类型往往报错信息模糊，比如把字符串当数值参与计算，或者在 mixin 内部误用父选择器 & 导致生成意外的选择器。
- 避免在
@mixin中直接写&，除非你明确需要它指向调用位置的父选择器；更稳妥的方式是让调用者控制结构，mixin 只负责声明 - 数值运算前加
type-of($val) == 'number'做简单防护（虽然 SCSS 没有 throw，但可用@warn提示） - 不要在 mixin 里写
@import或@use—— 它们应在顶层统一管理，否则可能引发重复导入或作用域不可见
进阶技巧：用@content实现样式“插槽”
当一个样式块需要包裹用户自定义内容时（比如卡片容器、模态框遮罩），@content 是关键。它不是参数，而是占位符，允许调用处注入任意 SCSS 代码块。
- 定义：
@mixin card-layout { padding: 1rem; border: 1px solid #eee; @content; } - 调用：
@include card-layout { font-size: 0.9rem; color: #333; }，最终生成的是完整规则块，而非拼接字符串 -
@content只能出现一次，且不能带参数；若需多处插入，得拆成多个 mixin 或用 map + 循环模拟
@mixin 的价值不在“写得少”，而在“改得准”——改一个定义，所有调用点自动同步，前提是别把它当成万能胶水去包揽选择器构造或全局状态管理。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
