LESS 是一种 CSS 预处理器，它提供了许多方便的功能来简化 CSS 的编写和维护。其中一个非常有用的功能就是 @extend，它可以实现样式的复用，从而减少代码冗余。但是，如果使用不当，@extend 也会带来一些问题，比如出现 “Undefined mixin” 的错误。本文将介绍如何正确地使用 @extend，避免这些问题的出现。
什么是 @extend
@extend 是 LESS 中的一个指令，它可以将一个选择器的样式继承到另一个选择器中。例如：
------- - ----------------- ----- ------- ----- -------------- ---- -------- ----- - --------------- - ------- -------- ------ ----- -
在上面的例子中，.primary-button 继承了 .button 的所有样式，并且添加了一个 color 属性。这样一来，我们就可以复用 .button 的样式，而不必重复编写。
@extend 的问题
虽然 @extend 很方便，但是如果使用不当，会带来一些问题。其中一个最常见的问题就是 “Undefined mixin” 的错误。例如：
------- - ----------------- ----- ------- ----- -------------- ---- -------- ----- - --------------- - ---------- ------ ----- -
在上面的例子中，我们使用了 .button() 这个 mixin，但是却出现了 “Undefined mixin” 的错误。这是因为 .button 不是一个 mixin，而是一个普通的选择器。如果我们想要使用 @extend，就需要将 .button 变成一个 mixin，例如：
--------- - ----------------- ----- ------- ----- -------------- ---- -------- ----- - --------------- - ---------- ------ ----- -
在上面的例子中，我们将 .button 变成了一个 mixin，这样就可以使用 @extend 了。但是，这样做会带来另一个问题，就是会生成多余的 CSS。在上面的例子中，.button 和 .primary-button 的样式都会被编译成 CSS，这样就会导致 CSS 文件变得很大，从而影响页面加载速度。
如何避免问题
为了避免 @extend 带来的问题，我们可以使用 @mixin 来定义样式，然后使用 @include 来引用。例如：
--------------- - ----------------- ----- ------- ----- -------------- ---- -------- ----- - ------- - ---------------- - --------------- - ---------------- ------ ----- -
在上面的例子中，我们使用了 @mixin 来定义样式，然后在 .button 和 .primary-button 中使用 @include 来引用。这样一来，就可以避免 “Undefined mixin” 的错误，并且不会生成多余的 CSS。
总结
@extend 是 LESS 中非常有用的一个功能，它可以实现样式的复用，从而减少代码冗余。但是，如果使用不当，@extend 也会带来一些问题，比如出现 “Undefined mixin” 的错误。为了避免这些问题，我们可以使用 @mixin 和 @include 来定义和引用样式，这样一来就可以避免问题，并且不会生成多余的 CSS。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65e5f7511886fbafa416aa97