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