关于解决大段样式复用的两种思路（less的继承和混入）

关于解决大段样式复用的两种思路。

问题：

有时候会遇到有一个地方的样式和自己需要的大部分相同，只有部分参数需要调整的情况，为了图方便我们经常是把别人的代码全部copy到自己页面然后进行改动，造成了大量的重复代码。
这里基于less讨论两种解决此问题的方式。

1.继承

例如有一个叫做.ceshi的类我们现在需要他的样式

.ceshi {
    margin: 0;
    padding: 0;
    color: #123456;
}

正好我们的.bi-title类也需要这段代码，只是color不同，则可以直接继承，然后加上自己需要的样式即可，如下：

.bi-title:extend(.ceshi) {
    width: 100%;
    height: 48px;
    line-height: 48px;
    position: relative;
    padding-left: 15px;
    font-size: 16px;
    // font-family: PingFang SC;
    font-weight: bold;
    color: @main_font_color;
}

编译出来的结果如下：

2.抽取混入

还是以.ceshi类举例，我们想复用这个类，便将其抽离为一个混入，如下：

.ceshi(@color) {
    margin: 0;
    padding: 0;
    color: @color;
}

然后在我们自己的类中使用这个混入，并传入参数即可：

.bi-title {
    .ceshi(@main_font_color);

    width: 100%;
    height: 48px;
    line-height: 48px;
    position: relative;
    padding-left: 15px;
    font-size: 16px;
    // font-family: PingFang SC;
    font-weight: bold;
}

编译结果为：

以上两种方法都可以避免大量的重复样式问题。