在前端开发中，我们经常会遇到需要多次使用相同样式的情况，为了提高代码复用率，我们可以使用 LESS 的 @extend 功能。
LESS 的 @extend 功能
@extend 功能允许我们将一个选择器的样式集扩展（extend）到另一个选择器，从而减少样式表中的冗余代码。具体来说，我们可以使用 @extend 将一个选择器的样式应用到另一个选择器上，从而实现样式共享。
示例代码
以下是一个简单的示例代码，介绍如何使用 @extend：
-- -------------------- ---- ------- ------- - -------- --- ----- ----------------- ----- ------ ----- ------- --- ----- ----- - --------------- - ------- -------- ----------------- -------- ------ ----- -
在这个例子中，我们定义了一个 .button 选择器，它包含了按钮的基本样式。接着我们使用 @extend 将 .button 的样式扩展到 .primary-button 上，并对 .primary-button 进行了一些针对性的修改。
@extend 的使用注意事项
虽然 @extend 功能可以大量减少 CSS 代码中的重复，但是需要谨慎使用，特别是在复杂的样式表中。
以下是一些使用注意事项：
- 为避免选择器的语义重叠，应当只在样式相同的元素之间使用 @extend；
- 将多个样式集合到一个选择器中，可以使代码更具可读性；
- 在扩展的样式规则中，可以使用 & 引用选择器本身。
总结
使用 LESS 的 @extend 功能可以大量减少 CSS 代码中的重复，提高代码复用率。但是需要注意的是，谨慎使用 @extend 功能可以避免语义重叠和代码可读性的问题。
在实际开发中，我们可以通过 @extend 将公共的样式集中在一起，然后通过继承的方式来实现代码复用。这不仅可以减少代码量，还可以提高样式统一性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649bc1ee48841e98948847c8