一、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的函数特性，定义好自己的函数库，提高代码的可读性、可维护性和重用性。
