在开发前端页面时，我们经常会遇到需要多次使用相同样式的情况。如果直接写 CSS，就需要重复书写相同的 CSS 代码，这不仅十分繁琐，还容易出错。LESS 可以帮助我们解决这个问题，并减少代码量。
LESS 的 mixin 功能
LESS 中的 mixin 功能可以让我们定义一段 CSS 样式代码，然后在需要使用的地方直接调用这段样式代码，从而避免了重复书写 CSS。
定义 mixin
定义一个 mixin 的语法如下：
.mixin-class {
property: value;
}
.mixin-name(@param) {
property: value;
}其中，.mixin-class 代表一个样式类，可以在 HTML 中使用。.mixin-name() 是一个 mixin 函数，它可以传递参数（@param），以满足不同的定制化需求。
调用 mixin
调用 mixin 的语法如下：
.selector {
.mixin-name(param);
}例子：
-- -------------------- ---- ------- ------- - ------- --- ----- ----- - -------------------------- - ------- --- ----- ------- - -- -- ----- --------- - -------- - --------- - ------------------------- -
在上面的例子中，我们定义了两个 mixin：.border 和 .customized-border()。其中，.border 是一个没有参数的 mixin，可以被直接调用；.customized-border() 是一个有参数的 mixin，需要传递一个颜色值参数后才能被调用。
LESS 的 extend 功能
LESS 中的 extend 功能可以让我们使用已有的样式类来扩展定义新样式类，从而避免重复书写样式代码。
定义样式类
定义一个样式类的语法如下：
.normal-class {
property: value;
}
.extended-class:extend(.normal-class) {
property: value;
}其中，.normal-class 是一个已经定义好的样式类，.extended-class 是一个扩展了 .normal-class 样式的新样式类。
使用已有样式类
使用已有样式类的语法如下：
.selector {
.normal-class;
}例子：
.normal-box {
border: 1px solid #ddd;
padding: 10px;
}
.success-box:extend(.normal-box) {
border-color: #00bf08;
}在上面的例子中，我们定义了一个 .normal-box 样式类，并设置了 border 和 padding 属性；然后我们使用 .normal-box 来定义 .success-box 样式类，并扩展了 border-color。这样，我们就可以在不重复书写代码的情况下，定义出多个不同的样式类。
总结
LESS 的 mixin 和 extend 功能可以帮助我们避免重复书写样式代码，提高开发效率。在实际开发中，我们可以结合使用这两个功能，以满足不同的开发需求。
-- -------------------- ---- ------- ------------- - --------- ------ - ------------------------------------- - --------- ------ - ------------ - --------- ------ - ------------------- - --------- ------ - --------- - -------------- ------------------- -
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64926b7348841e989403973e