LESS 是一种 CSS 预处理器，它提供了许多便利的功能来简化样式表的编写。其中最常用的两个功能是 mixins 和 extends。这两个功能都可以用来减少样式表中的冗余代码，但它们的实现方式和使用场景有所不同。在本文中，我们将深入探讨 mixins 和 extends 的区别，并提供一些示例代码来说明它们的用法。
Mixins
Mixin 是 LESS 中的一种函数，它可以将一组 CSS 属性打包成一个可重用的代码块。通过使用 mixin，我们可以避免在样式表中多次重复相同的代码，从而减少样式表的大小并提高代码的可维护性。
下面是一个简单的 mixin 示例：
.border-radius(@radius) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}在上面的代码中，我们定义了一个名为 border-radius 的 mixin，它接受一个参数 @radius。在 mixin 中，我们定义了四个属性，分别设置了元素的圆角半径。通过使用这个 mixin，我们可以将元素的圆角半径设置为 5 像素，如下所示：
.box {
.border-radius(5px);
}在上面的代码中，我们使用了 border-radius mixin，并将参数设置为 5px。这将导致 .box 类的元素具有 5 像素的圆角半径。
Extends
Extend 是另一种 LESS 功能，它可以让我们从一个选择器中继承样式并将其应用于另一个选择器。通过使用 extends，我们可以减少样式表中的重复代码，从而提高代码的可读性和可维护性。
下面是一个简单的 extends 示例：
-- -------------------- ---- -------
------- -
----------------- --------
------ -----
-------- ---- -----
------- -----
------- -
----------------- --------
-
-
-------------- -
------------------
----------------- --------
-在上面的代码中，我们定义了一个名为 .button 的选择器，并为其设置了一些样式。我们还定义了一个名为 .submit-button 的选择器，并使用 extends 将 .button 的样式应用于它。然后，我们覆盖了 .submit-button 的背景颜色，以使它与 .button 不同。
需要注意的是，extends 会将样式复制到新的选择器中，而不是将它们放入一个 mixin 中。这意味着如果我们在 extends 中更改了样式，那么原始选择器中的样式也会更改。因此，extends 应该谨慎使用，并且只应在必要时使用。
区别
虽然 mixins 和 extends 都可以用来减少样式表中的重复代码，但它们之间存在一些关键区别。下面是一些值得注意的区别：
- mixins 是将一组属性打包成一个可重用的代码块，而 extends 是将一个选择器的样式应用于另一个选择器。
- mixins 可以接受参数，而 extends 不可以。
- mixins 可以包含任意数量的属性，而 extends 只能复制选择器的样式。
- mixins 可以在任何地方使用，而 extends 只能在选择器的内部使用。
基于这些区别，我们可以根据需要选择 mixins 或 extends。如果我们需要将一组属性打包成一个可重用的代码块，并在多个选择器中使用它们，那么 mixins 是最好的选择。如果我们只需要将一个选择器的样式应用于另一个选择器，那么 extends 是最好的选择。
总结
LESS 中的 mixins 和 extends 都是非常有用的功能，它们可以帮助我们减少样式表中的冗余代码，从而提高代码的可读性和可维护性。虽然它们的实现方式和使用场景有所不同，但它们都可以帮助我们更有效地编写样式表。在选择使用 mixins 或 extends 时，请根据需要进行选择，并根据具体情况进行调整。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6639c947d3423812e47f6eee