LESS 中的 Mixins 是预处理器提供的核心功能，它允许开发者将一组 CSS 属性封装成一个可复用的代码块，在需要的地方直接调用，避免重复编写相同的样式代码，大幅提升样式开发效率。
什么是 LESS Mixins
Mixins 可以理解为 LESS 中定义的可复用样式片段，它和普通 CSS 规则类似，但是可以被其他规则调用。你可以把它看作是一个样式模板，当需要相同的样式时，直接引用这个模板即可，不需要重复书写里面的属性。
基础 Mixins 定义与调用
定义一个 Mixins 非常简单，只需要像写普通 CSS 规则一样，给一组属性起一个名字，然后在其他选择器中使用这个名字调用即可。
// 定义一个名为 center-block 的 Mixins，实现块级元素水平居中
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
// 调用 Mixins
.container {
width: 1200px;
.center-block;
}
// 编译后的 CSS 结果
.container {
width: 1200px;
display: block;
margin-left: auto;
margin-right: auto;
}
Mixins 的核心作用
1. 实现样式复用，减少冗余代码
这是 Mixins 最基础也最常用的作用。当多个元素需要相同的样式时，不需要在每个选择器里都写一遍相同的属性，只需要定义一次 Mixins，然后多次调用即可。
比如多个按钮都需要相同的圆角、内边距和字体样式，就可以把这些公共样式封装成 Mixins：
// 定义按钮基础样式 Mixins
.btn-base {
padding: 8px 16px;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
border: none;
}
// 主按钮调用
.btn-primary {
.btn-base;
background-color: #1890ff;
color: #fff;
}
// 危险按钮调用
.btn-danger {
.btn-base;
background-color: #ff4d4f;
color: #fff;
}
2. 支持参数传递，生成动态样式
Mixins 可以像函数一样接收参数，根据传入的参数值输出不同的样式，让样式更灵活。你可以给参数设置默认值，不传入参数时使用默认值。
// 定义带参数的 Mixins，设置盒模型的内边距，默认上下10px，左右20px
.box-padding(@topBottom: 10px, @leftRight: 20px) {
padding: @topBottom @leftRight;
}
// 传入不同参数调用
.header {
.box-padding(15px, 30px);
background-color: #f5f5f5;
}
.content {
.box-padding; // 使用默认参数
}
.footer {
.box-padding(5px, 10px);
}
3. 简化浏览器前缀处理
不同浏览器对 CSS 新属性的支持需要添加不同的前缀，比如 -webkit-、-moz- 等，手动写这些前缀很繁琐。用 Mixins 可以封装这些带前缀的属性，调用时只需要写一次。
// 封装弹性布局的 Mixins，自动添加浏览器前缀
.flex-layout {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: flex;
}
// 封装过渡效果的 Mixins，支持传入过渡属性和时间
.transition(@property: all, @time: 0.3s) {
-webkit-transition: @property @time;
-moz-transition: @property @time;
-ms-transition: @property @time;
transition: @property @time;
}
// 调用示例
.card {
.flex-layout;
.transition(transform, 0.2s);
&:hover {
transform: translateY(-5px);
}
}
4. 提升代码可维护性
当公共样式需要修改时，只需要修改 Mixins 的定义，所有调用这个 Mixins 的地方都会同步更新，不需要逐个修改每个选择器的样式，大大降低了维护成本。
比如之前定义的 .btn-base Mixins 如果需要调整内边距，只需要修改 Mixins 里的 padding 值，所有按钮的样式都会自动更新，避免遗漏修改的情况。
使用 Mixins 的注意事项
- Mixins 的名称不要和已有的 CSS 属性名冲突，避免编译出现异常。
- 如果需要定义一个不需要输出到编译后 CSS 的 Mixins，可以在定义时在名称后面加括号，比如
.hidden() { display: none; }，这样这个 Mixins 本身不会出现在最终的 CSS 里，只有调用它的地方会输出对应样式。 - 参数名尽量语义化，方便后续调用时理解每个参数的作用。
总结
LESS 中的 Mixins 是提升样式开发效率的重要工具，它通过样式复用、参数化输出、简化前缀处理等方式，减少了冗余代码，提升了代码的可维护性。熟练掌握 Mixins 的用法，能让你在编写 LESS 代码时更游刃有余，更高效地处理各类样式需求。