Less自定義函數指南

一、Less自定義函數傳參

在Less中，如果想要自定義函數，就需要掌握如何傳參。Less的函數聲明方式和CSS類似，使用@function關鍵字。以自定義一個對數字進行平方的函數為例：

@function square($number){
  @return $number * $number;
}

在定義函數時，可以設置形參，通過函數傳遞實參。上述代碼中，$number是形參，可以傳遞任何數字類型的實參，返回值為平方值。

在調用函數時，可以以函數名+實參的方式進行調用。例如：

.square {
  width: square(10px); // 返回值為100px;
}

Less函數傳參的形式類似於JavaScript，不同之處在於參數後面需要跟上數據類型。

二、Less寫函數

Less中可以像CSS一樣定義類並使用類。More為類中定義的方法，MoreDemo為使用該方法的例子。

// Less
.more(@a, @b) {
  before: @a + @b;
  after: @a - @b;
}
.moredemo{
  .more(12, 5);
}

// CSS
.moredemo{
  before:17;
  after: 7;
}

與CSS定義類和方法不同，Less定義出的類需要使用@name提供名稱，以便可以在其他部分使用它，否則類型會被丟棄。

三、自定義函數strcomp

我們可以通過Less自定義函數來實現JavaScript中的字符串比較函數strcomp：

@strcomp: {
    compare: (@str: '', @strs: '') => {
        // 去除兩個字符串的空格後進行比較
        @str: replace(~"@{str}", ~"[[:space:]]", '');
        @strs: replace(~"@{strs}", ~"[[:space:]]", '');
        // 判斷兩個字符串相等返回 0，否則返回-1
        @result: if(@str = @strs, 0, -1);
        @return: @result;
    }
};
// 調用函數
@strcomp.compare('Hello, World!', '  Hello,     World!  '); //返回 0

以上實現了一個字符串比較函數，可以與內置函數合併，如下：

.strcomp: {
    compare: (@str: '', @strs: '') => {
        // 去除兩個字符串的空格後進行比較
        @str: replace(~"@{str}", ~"[[:space:]]", '');
        @strs: replace(~"@{strs}", ~"[[:space:]]", '');
        // 判斷兩個字符串相等返回 0，否則返回-1
        @result: if(@str = @strs, 0, -1);
        @return: @result;
    }
};
// 合併到邏輯運算中
@logic: {
    and: (@a,@b) => { @return: if(@a = true, if(@b = true, true, false), false); },
    or: (@a,@b) => { @return: if(@a = true, true, if(@b = true, true, false)); },
    not: (@a) => { @return: if(@a = true, false, true); },
    strcomp: @strcomp.compare
};
// 使用內置函數或自定義函數
@logic.not(false); // true
@logic.strcomp("abc", "abc "); //0

四、Less函數的使用

Less內置了許多有用的函數，可以輕鬆實現多種操作。以下將列舉一些常用函數。

1. unit()：獲取數值的單位，用法如下：

@value: 10px;
unit(@value); // 返回 px

2. colors()：獲取當前主題顏色，用法如下：

header {
    color: colors(@themeprimary);
}

3. lighten() / darken()：調整顏色的亮度，用法如下：

@color: #5599FF;
lighten(@color, 20%); // 返回 #9fc5ff
darken(@color, 20%); // 返回 #3d6dcc

4. percentage()：將數值轉換為百分比，用法如下：

@value: 0.8;
percentage(@value); // 返回 80%

5. e()：對字符串進行轉義，用法如下：

e("smart'"); // 返回 smart\'

五、Less color函數

Less還內置了許多有用的函數，用於處理顏色。這裡列舉一些常用的顏色函數。

1. spin()：調整顏色的色相，用法如下：

@color: #5599FF;
spin(@color, 60); // 返回 #7fff55

2. saturate() / desaturate()：調整顏色的飽和度，用法如下：

@color: #5599FF;
saturate(@color, 20%); // 返回 #7fc5ff
desaturate(@color, 20%); // 返回 #3d6ccc

3. mix()：混合兩個顏色，用法如下：

@color1: #5599FF;
@color2: #FF9999;
mix(@color1, @color2, 50%); // 返回 #aa77cc

4. lighten() / darken()：調整顏色的亮度，用法如下：

@color: #5599FF;
lighten(@color, 20%); // 返回 #9fc5ff
darken(@color, 20%); // 返回 #3d6dcc

六、Less提供的內置函數

Less提供了許多有用的內置函數，以下列舉一些。

1. ceil() / floor()：上下取整，用法如下：

@number: 2.3;
ceil(@number); // 返回 3
floor(@number); // 返回 2

2. round()：四捨五入，用法如下：

@number: 2.5;
round(@number); // 返回 3

3. min() / max()：返回最大/最小值，用法如下：

@value1: 10;
@value2: 20;
min(@value1, @value2); // 返回 10
max(@value1, @value2); // 返回 20

4. abs()：返回絕對值，用法如下：

@value: -10;
abs(@value); // 返回 10

七、Less定義函數

使用Less定義函數可以使得代碼更具有可讀性和可重用性。

下面是一個定義比較兩個字符串是否相同的函數的例子：

.eq(@a; @b) when (@a = @b) { 
  @return: true; 
} 
.eq(@a; @b) when (@a != @b) { 
  @return: false; 
} 

// example
.eq(1; 2); // false
.eq(foo; foo); // true

使用該函數，可以在項目中多次調用，重用代碼，使代碼更加簡潔易讀。

結論

Less自定義函數是一項非常強大的功能，它使得我們能夠輕鬆地擴展Less，使其符合我們的需求。在使用Less時，我們應該儘可能地利用Less的函數特性，定義好自己的函數庫，提高代碼的可讀性、可維護性和重用性。