关于解决大段样式复用的两种思路。
问题:
有时候会遇到有一个地方的样式和自己需要的大部分相同,只有部分参数需要调整的情况,为了图方便我们经常是把别人的代码全部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;
}
编译结果为:
以上两种方法都可以避免大量的重复样式问题。