LESS实战技巧(一)：实现多态的两种方法

在LESS中，通过Mixin的函数多态特性可以降低调用的复杂度，显著提高工作效率，并能大幅减少代码工作量，实现多态的方法有两种，如下。

1. 函数调用方式

函数定义的方式如下：

.tr-td-style(@size:px;@color) {
    tr {
        height : @size;
        td {
            font-size : @size;
        }
    }
}
/* 重新定义函数，减少函数的参数个数 */
.tr-td-style(@size) {
    .tr-td-style(@size);
    color : green;
}
           

调用的方式如下：

table tbody {
    .tr-td-style(px);
}
           

通过函数调用的方式，可以实现增强性多态，适用于变量可以固定的场景。

2. 条件判断方式

这种办法不好的地方在于，传递的参数一个都不能少，所以只能算是一种伪多态，但优点也很明显，能把相关的逻辑写在一起，定义的方式如下。

.tr-td-style(@size:px;@color) {
    tr {
        height : @size;
        td {
            font-size : @size;
        }
    }
    /* 根据传送的参数确定是否生成CSS样式 */
    & when(iscolor(@color)) {
        color : @color;
    }
}
           

调用的方式如下：

table tbody {
    .tr-td-style(px, green);
}
           

需要说明的是，在less中，并没有直接判断参数是否为空的函数，但通过相关的is函数，可以达到类似的效果。

通过函数定义，不仅能大幅增强代码的复用性，还能显著降低代码的层次(如果处理不好，在大多数的情况下，可能会出现less的代码量还会大于css的代码量)。