在Less中使用extend的优势是什么?

2 min read

Less中的extend(扩展)可以使一个选择器继承另一个选择器的样式,从而避免了重复编写样式代码的问题。

具体来说,通过使用@extend指令,可以让一个选择器继承另一个选择器的样式。例如:

.button {
  background-color: blue;
  font-size: 16px;
}

.success-button {
  @extend .button;
  color: green;
}

以上代码中,success-button选择器继承了button选择器的所有样式,并添加了自己的color属性,使成功按钮颜色变成绿色。

在样式表中,使用extend可以减少代码量,并且使代码更易于维护。