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的代碼量)。