应控制@mixin使用，高频组件用@extend共享基础规则，差异化部分用@mixin；卡片主题切换需分离结构与皮肤，用CSS自定义属性驱动；表单控件须处理disabled、focus、label可访问性；参数超4个、生成选择器、兼容IE前缀等场景应停用@mixin。
直接用 @mixin 封装组件样式是可行的，但必须控制调用方式，否则 CSS 体积会指数级膨胀，且难以维护。
为什么按钮类一多就编译出几百行重复 CSS
每次写 @include btn($bg: #007bff)，Sass 都会把整套 hover/focus/disabled 规则原样复制一遍。10 个变体 = 10 份完全相同的 transition、border-radius、box-shadow 声明。
- 高频组件（如
btn-primary、btn-secondary）改用@extend共享基础规则，只让@mixin负责差异化部分 - 避免在
@mixin内部嵌套@media或@supports——这些块会被完整复制，而不是合并 - 生产构建时，用
/* purgecss start ignore */显式保留在safelist中的类名，防止被误删
如何让 @mixin card() 支持主题切换而不炸开体积
别把颜色值硬编码进 mixin；Sass 编译期无法响应运行时主题切换。真正可扩展的方案是分离结构与皮肤：
- 结构层：用
@mixin card-base定义 padding、border-radius、box-shadow 等不变逻辑 - 皮肤层：用 CSS 自定义属性（
--card-bg、--card-border）驱动视觉，Sass 只生成background-color: var(--card-bg) - 调用时写
.card { @include card-base; }，主题色由 JS 注入或根元素 class 控制
@mixin form-control() 必须处理的三个可访问性陷阱
纯样式封装容易忽略语义和交互细节，导致键盘导航失效或屏幕阅读器误读：
立即学习“前端免费学习笔记（深入）”；
- disabled 状态不能只靠
opacity: 0.6——必须同时加pointer-events: none和cursor: not-allowed - focus 样式需明确覆盖 outline，并确保对比度 ≥ 4.5:1；Sass 里用
lighten($color, 20%)不可靠，建议直接设变量$focus-color - label 关联不是 mixin 职责，但文档里得提醒：使用
@mixin form-control时，HTML 必须带for/id或包裹关系
什么时候该停手，别再往 @mixin 里塞逻辑
Mixin 是样式函数，不是配置中心。以下情况说明你已经越界：
- 参数超过 4 个且存在强依赖（比如
$size影响$padding和$font-size，还得联动$line-height）——该拆成多个专注的 mixin - 需要根据参数生成不同选择器（如
.btn-lg、.btn-sm）——这是 utility class 的职责，交给 Tailwind 或自建 class 系统更合适 - 要兼容 IE11 的 flex 语法差异（
-ms-flex-packvsjustify-content）——前缀应由 Autoprefixer 处理，而非手动写在 mixin 里
真正难的不是写出能用的 mixin，而是判断哪些逻辑不该放进 mixin。
