Sass的Mixin是一种可以复用样式块的功能，它允许开发者将一组CSS规则封装起来，在需要的地方直接调用，避免了重复编写相同的样式代码，同时也让样式的维护变得更加简单。Mixin支持传递参数，还能包含逻辑判断，是Sass中非常实用的特性。
一、Mixin的基础定义与调用
使用@mixin指令可以定义一个Mixin，定义时可以给Mixin起一个语义化的名称，后续通过@include指令调用这个名称即可复用对应的样式。
下面是一个最简单的Mixin定义和调用示例：
// 定义一个名为flex-center的Mixin，实现 flex 布局居中
@mixin flex-center {
display: flex;
justify-content: center;
align-items: center;
}
// 调用Mixin
.container {
@include flex-center;
width: 100%;
height: 100vh;
}
.header {
@include flex-center;
background-color: #f5f5f5;
}
编译后的CSS代码如下：
.container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
}
.header {
display: flex;
justify-content: center;
align-items: center;
background-color: #f5f5f5;
}
二、带参数的Mixin使用
Mixin支持传递参数，让复用的样式更加灵活。可以在定义Mixin时声明参数，调用时传入对应的值，还可以给参数设置默认值，调用时如果不传参就使用默认值。
1. 基础参数传递
下面的示例定义了一个设置盒模型尺寸的Mixin，支持传入宽度和高度两个参数：
// 定义带参数的Mixin，参数用$符号开头
@mixin set-size($width, $height) {
width: $width;
height: $height;
}
// 调用时传入参数
.box1 {
@include set-size(200px, 100px);
background-color: #ff0000;
}
.box2 {
@include set-size(300px, 150px);
background-color: #00ff00;
}
2. 带默认值的参数
如果希望参数有默认值，可以在定义参数时用冒号指定默认值，调用时可以不传该参数：
// 参数$height设置默认值为100px
@mixin set-size($width, $height: 100px) {
width: $width;
height: $height;
}
// 只传宽度参数，高度使用默认值
.box3 {
@include set-size(200px);
background-color: #0000ff;
}
3. 不定参数
当Mixin需要接收不确定数量的参数时，可以使用...$args的语法，将多个参数收集到一个列表中：
// 定义接收不定参数的Mixin，用于设置盒阴影
@mixin box-shadow($shadows...) {
box-shadow: $shadows;
}
.card {
@include box-shadow(0 2px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.05));
padding: 20px;
}
三、Mixin中传递内容块
Mixin还支持接收内容块，使用@content指令可以在Mixin内部插入调用时传入的样式内容，这个特性在需要包裹特定上下文的场景中非常有用。
下面是一个媒体查询的Mixin示例，调用时可以传入不同屏幕尺寸下的样式内容：
// 定义媒体查询Mixin
@mixin respond-to($breakpoint) {
@if $breakpoint == mobile {
@media (max-width: 768px) {
@content;
}
} @else if $breakpoint == desktop {
@media (min-width: 1200px) {
@content;
}
}
}
// 调用Mixin并传入内容块
.container {
width: 100%;
@include respond-to(mobile) {
padding: 10px;
}
@include respond-to(desktop) {
padding: 30px;
max-width: 1200px;
margin: 0 auto;
}
}
四、Mixin的适用场景
Mixin适合用在以下场景中：
- 需要复用的固定样式组合，比如flex居中、清除浮动等通用样式
- 需要兼容不同浏览器的前缀样式，比如
transform、transition的前缀处理 - 响应式布局中不同屏幕尺寸的样式封装
- 包含逻辑判断的复杂样式生成，比如根据不同的主题参数生成对应的主题样式
需要注意的是，如果复用的样式只是简单的属性值组合，没有参数和逻辑，也可以考虑使用%占位符选择器，它的编译后不会产生冗余的样式代码，而Mixin每次调用都会把样式完整输出到编译后的CSS中。