LESS 是一种 CSS 预处理器，它可以让我们在编写 CSS 时更加方便，更加灵活。其中一个重要的特性就是可以复用样式，这在前端开发中非常有用。在本文中，我们将会探讨如何在使用 LESS 时较优雅地复用样式。
为什么需要复用样式
前端开发中，我们经常需要在不同的元素、组件、页面中使用相同的样式。如果每次都重新编写一遍样式，不仅浪费时间，而且容易出错。此时，复用样式就可以大大提高开发效率，同时也可以保证样式的一致性和可维护性。
如何复用样式
变量
LESS 提供了变量的功能，可以将一些常用的值定义为变量，然后在需要使用的地方直接引用变量。这样，如果需要修改这个值，只需要修改变量的定义即可。
@main-color: #2196F3; .button { background: @main-color; color: white; padding: 10px; }
在上面的代码中，我们定义了一个名为 main-color 的变量，它的值为 #2196F3。然后，在 .button 类中，我们使用了这个变量作为 background 颜色。如果需要修改主色调，只需要修改变量的值即可，而不需要修改所有使用到这个颜色的地方。
混合（Mixin）
混合是 LESS 中非常有用的一个功能，它可以将一组样式定义为一个混合，然后在需要使用的地方直接引用混合。这样，可以将一些常用的样式组合成一个混合，然后在需要使用的地方直接调用混合即可。
-- -------------------- ---- ------- ----------------------- ---- - -------------- -------- ---------------------- -------- ------------------- -------- - ------- - ----------------- ----------- -------- ------ ------ -------- ----- -展开代码
在上面的代码中，我们定义了一个名为 border-radius 的混合，它接受一个参数 radius，默认值为 5px。然后，在 .button 类中，我们使用了这个混合，并且没有传递任何参数。这样，.button 类就会继承 border-radius 混合中定义的所有样式。
继承（Extend）
继承是 LESS 中另外一个非常有用的功能，它可以让一个类继承另外一个类的所有样式。这样，可以将一些相似的样式定义为一个基类，然后在需要使用的地方继承这个基类即可。
-- -------------------- ---- ------- ------------ - ----------- -------- ------ ------ -------- ----- ------- ----- - ------- - ----------------------- ----------------- -展开代码
在上面的代码中，我们定义了一个名为 base-button 的基类，它包含了 .button 类中的所有样式。然后，在 .button 类中，我们使用了 &:extend(.base-button)，表示将 .button 类继承自 base-button 类。这样，.button 类就会继承 base-button 类中定义的所有样式，并且还可以使用 border-radius 混合中定义的样式。
小结
在使用 LESS 时，复用样式是非常有用的。通过使用变量、混合和继承，可以让样式更加灵活、可维护和易于扩展。同时，也可以提高开发效率，减少代码量。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6787aa8e09307066471aa2cd
