在前端开发中，CSS是一个非常重要的技能，但是大量的重复代码和样式，会降低我们的开发效率。为了解决这样的问题，Less预处理器应运而生。Less中的@extend和@mixin是运用到其中的两个重要的特性。在本文中，我们将学习如何使用@extend和@mixin的区别，并用实例进行演示。
##@extend
@extend是将一个选择器的样式继承到另外一个选择器中，从而减少了样式代码的重复。在Less中，@extend的语法格式如下：
.selector1{
//样式规则
}
.selector2{
&:extend(.selector1);
//样式规则
}@extend的语法格式中，用&符号表示当前选择器。例如，.btn就表示为&。在selector2中,&:extend(.selector1)表示将.selector1中的样式继承到.selector2中。
下面我们就看一个示例：
-- -------------------- ---- ------- ----- ---------- ----- -------- ---- ----- ------ ----- ----------------- -------- - ------------- -------------------------- -
这个示例中，.btn中包含了按钮的基本样式规则，.btn-primary则使用@extend将.btn中的样式规则继承过来，省略了.button-primary中的样式规则。
@mixin
@mixin则是将一组样式规则封装成一个代码块，并在需要的地方调用，使用@mixin能够提供一定的样式复用性。在Less中，@mixin的语法格式如下：
.mixinName{
//样式规则
}
.selector{
.mixinName;//调用@mixin
} 首先，我们需要创建一个.mixinName的代码块，在里面写入样式规则。然后在需要的地方，通过调用.mixinName来使用这一组样式规则。
下面我们举个例子：
-- -------------------- ---- ------- ----------------------- -------------- ------- ---------------------- ------- ------------------- ------- - ----------- ------------------------------- -
在这个例子中，我们定义了一个.mixinName的代码块，并在里面设置了一个@value参数，然后我们在#container选择器中调用这个@mixin，并传递参数10px进去。这样，我们就可以达到等价于编写下面这段代码的效果：
#container{
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}##@extend和@mixin的区别
@extend和@mixin有不同的实际应用场景。当我们需要尽可能的去减少样式代码的冗余，或者在编写一个组件时，使用@extend是更好的选择。而当我们需要设置一组规则，这些规则可以在多个地方被重复使用，或者这些规则在多个组件中是可变的，使用@mixin则是更好的选择。
此外，@extend将样式代码继承到目标元素中，会减少一些选择器的代码，但最终生成的css规则会出现大规模的css标记的重复，从而降低css文件的整体性能。而@mixin则不会造成样式的继承，所以，@mixin可以提供更好的代码重用性。
##总结
无论是@extend还是@mixin都具有提高css代码可读性和可维护性的优点，能够让我们更加专注于样式的设计和优化。虽然它们有不同的用途，但无论哪种，都能让我们减轻样式冗余的问题，并使整个项目的css代码更加简洁。但是，在使用它们时，也要注意其实际应用的需求，并灵活运用它们的特性，设计出更好的前端程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6481a6f948841e9894122da7