什么是 Mixin
Mixin 是一种代码复用技术，它允许开发者在多个选择器之间共享一些相同的属性和值。这样一来，就可以大大减少代码量，同时也提高了代码的可读性和可维护性。
在 LESS 中，使用 Mixin 可以通过定义一组属性集合，然后在多个选择器中调用这些属性集合来实现复用。
如何使用 Mixin
定义 Mixin
在 LESS 中，可以通过 . 开头的 class 名称来定义 Mixin，如下所示：
.myMixin {
font-size: 12px;
color: #333;
}调用 Mixin
在 LESS 中，可以使用 . 加上 Mixin 名称来调用 Mixin，如下所示：
.myClass {
.myMixin;
}这样，.myClass 就会继承 .myMixin 中定义的属性值。
带参数的 Mixin
在 LESS 中，可以定义带参数的 Mixin，这样就可以方便地传递变量，实现更灵活的复用。如下所示：
.myMixin(@size, @color) {
font-size: @size;
color: @color;
}调用带参数的 Mixin，只需要在 Mixin 名称后面加上参数，如下所示：
.myClass {
.myMixin(14px, #333);
}Mixin 嵌套
在 LESS 中，可以使用 Mixin 嵌套，这样就可以方便地调用其他 Mixin，实现更复杂和灵活的复用。如下所示：
-- -------------------- ---- ------- -------- - ---------- ----- ------ ----- - ------------- - ----------------- -------- --------- -
调用嵌套的 Mixin，只需要在 Mixin 名称后面加上父级 Mixin 名称，如下所示：
.myClass {
.anotherMixin;
}Mixin 在实际开发中的应用
使用 Mixin 可以大大减少代码量，同时也提高了代码的可读性和可维护性。在实际开发中，可以将一些常用的 CSS 属性封装成 Mixin，实现复用，如下所示：
-- -------------------- ---- ------- -- -- ----- ----------------------- - ---------------------- -------- ------------------- -------- -------------- -------- - -------------------- - ------------------- -------- ---------------- -------- ----------- -------- - -- -- ----- ------- - -------------------- --------------- --- --- ------ -
这样就可以轻松地给 .button 按钮添加圆角和阴影效果。
总结
在 LESS 中使用 Mixin 可以大幅减少代码量，增加代码的可读性和可维护性，同时，其应用也十分广泛，如圆角、阴影等常见属性的复用。因此，学习以及掌握 Mixin 的使用，对于前端开发者来说是非常重要的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651d0db495b1f8cacd491d33