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 引入。它的核心价值是解耦，不是“越多越好”。
- 按功能分：_
mixins.scss（纯函数）、_variables.scss（设计系统变量）、_reset.scss（基础重置） - 避免一个 Partial 包含 Mixin + 变量 + 实际样式——混合职责会让维护者无法预判引入后果
- Sass 5.0+ 推荐用
@use替代@import，它强制命名空间（如utils.button-style），防止变量/Mixin 冲突 - 路径别写相对 ../ 太多层，统一用
@use "base/mixins"并配置includePaths简化引用
为什么局部重用失败？常见坑点
局部样式重用失效，往往不是语法错，而是作用域或加载顺序问题。Sass 编译器不会报错，但结果不对。
立即学习“前端免费学习笔记（深入）”；
-
@use必须在文件顶部，且不能出现在嵌套规则内；@include不能在@media外层直接调用未@use的 Mixin - 变量未通过
@use显式暴露（如没加as *或public）会导致Undefined variable - Partial 被多个文件
@use，Sass 会自动去重，但若混用@use和@import，变量可能被覆盖或丢失作用域 - 最隐蔽的坑：CSS 优先级没变，只是样式被覆盖了——Mixin 展开后仍是普通 CSS 规则，仍受选择器权重影响
