Sass mixin 是编译期样式复用的最佳实践，支持参数化、@content 嵌套及变量联动，适用于按钮基类、Flex 布局、悬停动效和主题化开发，但应避免过度封装零散样式。
用 Sass 的 mixin 封装重复样式，是最直接、最可控的解法。它不像 CSS 自定义属性（CSS Custom Properties）那样依赖运行时，也不像继承类（BEM 的 modifier）那样容易造成语义混乱，而是编译期复用，既干净又高效。
把固定组合的样式抽成 mixin
比如按钮的圆角、边框、内边距、字体大小经常一起出现：
- 写一个
@mixin btn-base，把公共部分（padding: 8px 16px; border-radius: 4px; font-size: 14px;）包进去 - 在具体按钮类中调用：
@include btn-base; - 后续新增按钮变体（如大号、危险色）只需复用 + 覆盖个别属性，不用复制整段 CSS
带参数的 mixin 应对微小差异
颜色、尺寸、间距等常变项，做成参数让 mixin 更灵活：
@mixin flex-center($direction: row) { display: flex; justify-content: center; align-items: center; flex-direction: $direction; }- 调用时：
@include flex-center(column);或@include flex-center();（用默认值） - 比写多个类似类名（
.flex-row-center/.flex-col-center）更轻量，也避免 HTML 里堆砌冗余 class
用 @content 实现样式嵌套注入
当需要“包裹逻辑”时（比如给一组元素统一加过渡、阴影或媒体查询），@content 是关键：
立即学习“前端免费学习笔记（深入）”；
@mixin hover-effect { &:hover { @content; } }- 使用：
@include hover-effect { color: #007bff; transform: translateY(-2px); } - 这样就把行为（hover 状态）和具体样式分离，复用性更强，也方便统一维护动效规则
配合变量 + mixin 做主题化基础
把颜色、断点、间距等定义为变量，再在 mixin 中引用，就能支撑多主题或响应式扩展：
- 定义
$spacing-sm: 4px; $breakpoint-md: 768px; - mixin 中写
margin: $spacing-sm $spacing-sm * 2;或@media (min-width: $breakpoint-md) { ... } - 换主题时只改变量，所有依赖它的 mixin 自动更新，无需逐个查找替换
不复杂但容易忽略：mixin 不是越多越好，优先封装真正高频、成组、有明确语义的样式块；零散单条声明（比如单独一个 color: red）更适合用变量或自定义属性控制。
