Sass@mixin与@include提升代码复用效率

Sass 的 `@mixin` 与 `@include` 是轻量、灵活且安全的样式复用利器：通过定义带默认值的参数化样式块（如 `@mixin pad($size: 16px)`），开发者可按需调用、覆盖参数，支持位置传参和关键词传参，并天然适配 BEM 等嵌套场景；它不生成冗余 CSS，仅在调用时展开，比 `@extend` 更可控、比复制粘贴更可靠——但也要警惕滥用：单条简单属性、强业务绑定或需运行时响应的逻辑并不适合封装进 mixin，尤其避免在循环中无节制调用以防止 CSS 体积膨胀。掌握何时用、怎么写、为何慎用，才能真正释放 Sass 复用能力的高效与优雅。

直接用 @mixin 定义可复用样式块，再用 @include 在需要的地方插入——这是 Sass 最轻量、最可控的复用方式，比 @extend 更灵活，比复制粘贴更安全。

怎么写一个带默认值的 @mixin

参数必须以 $ 开头，否则编译后会变成字面量字符串，比如 padding: size；默认值写在参数名后用冒号分隔，调用时可省略。

• @mixin pad($size: 16px) { padding: $size; } —— 调用 @include pad() 就用默认值，@include pad(24px) 就覆盖它
• @mixin border($width: 1px, $style: solid, $color: #ccc) { border: $width $style $color; } —— 支持按位置传参（@include border(2px, dashed)）或关键词传参（@include border($color: red)）
• 单位要统一：如果参数是 $size，就别在 mixin 体内硬写 px，否则传 rem 会出错

@include 嵌套在选择器里会怎样

它只是把 mixin 内部的声明原样展开到当前选择器作用域，不新增层级，也不改变 CSS 优先级。

• 在 .card { @include flex-center; } 中，flex-center 里写 display: flex，最终就是 .card { display: flex; ... }
• 如果 mixin 里用了 &__title 这种嵌套语法，& 会被自动替换成外层选择器，适合 BEM 场景
• 多个 @include 并列时，后写的同名属性会覆盖前面的，和手写 CSS 层叠规则一致

哪些情况不该塞进 @mixin

不是所有重复样式都值得封装。过度抽象反而让调试变慢、编译体积变大。

• 单条属性且极少变动，比如 cursor: pointer，直接写比 @mixin clickable { cursor: pointer; } 更干脆
• 强业务语义的组合，如 @mixin user-card-header，名字绑死了用途，换个页面就难复用
• 涉及主题切换或运行时逻辑判断（比如根据 dark mode 改颜色），Sass 的 @if 能做但维护成本高，更适合交给 CSS 自定义属性或 JS 控制

真正关键的是：@mixin 不生成实际 CSS，只等你调用；而 @include 是一次“展开”，每次调用都会复制一份样式代码——所以别在循环里无节制地 @include，尤其当 mixin 内容很大时，容易让输出 CSS 膨胀。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~