Mixin是Sass中带参数的样式复用机制，适用于频繁出现且仅属性值不同的样式逻辑（如主题色、尺寸），但不宜封装完整组件结构或嵌套@media。
什么是Mixin，什么时候该用它
Mixin 是 Sass 提供的代码块复用机制，本质是带参数的样式模板，适合封装有变化的样式逻辑。比如按钮的圆角、阴影、禁用态切换，每次调用可传不同值，比重复写 border-radius 或 box-shadow 更可控。
- 当一组样式频繁出现且仅属性值不同（如主题色、尺寸、断点）时，优先用
@mixin - 避免把大段布局样式（如整套卡片结构）塞进 Mixin——它不是组件，不处理 HTML 结构
- 注意：Mixin 在编译时被展开，不会生成额外 CSS 类；若需运行时动态控制，应配合 CSS 自定义属性或 JS
如何声明和调用带参数的Mixin
声明时用 @mixin + 名称 + ($param: default)，调用时用 @include。参数支持默认值、可变参数（$args...）和关键字传参，但别过度嵌套——可读性比炫技重要。
@mixin button-style($bg: #007bff, $radius: 4px) {
background-color: $bg;
border-radius: $radius;
padding: 8px 16px;
border: none;
}
.btn-primary { @include button-style(#007bff); }
.btn-small { @include button-style(#6c757d, 2px); }
- 参数名建议语义化，如用
$spacing-sm而非$s - 多个布尔参数慎用，容易混淆顺序；改用 map（如
$config: (size: sm, variant: outline)）更清晰 - 不要在 Mixin 内部写
@media嵌套再嵌套，拆成独立响应式 Mixin 更易测试
Partial 文件怎么组织才不混乱
Partial 是以 _xxx.scss 命名的 Sass 文件，本身不输出 CSS，只供 @use 或 @import 引入。它的核心价值是解耦，不是“越多越好”。
