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

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

1. 函数调用方式

函数定义的方式如下：

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

调用的方式如下：

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

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

2. 条件判断方式

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

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

调用的方式如下：

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

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

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