LESS 是一种 CSS 预处理器，可以让我们在编写 CSS 的时候使用变量、函数、嵌套等功能，从而让代码更加简洁、易于维护。其中，函数是 LESS 中非常重要的一个功能，可以让我们在编写样式时更加灵活，提高代码的重用性。本文将详细介绍 LESS 中如何使用函数，并提供一些示例代码。
LESS 函数的基本语法
在 LESS 中，我们可以使用 @function 关键字来定义一个函数，其基本语法如下：
@function 函数名(参数1, 参数2, ...) {
// 函数体
@return 返回值;
}其中，函数名 是我们定义的函数名称，可以根据需要自行命名，参数1、参数2 等是函数的参数，可以根据需要添加。在函数体中，我们可以使用 LESS 的语法，包括变量、运算符、控制语句等。最后，使用 @return 关键字返回函数的结果。下面是一个简单的例子：
@function add(a, b) {
@return a + b;
}
.test {
width: add(100px, 200px);
}在上面的代码中，我们定义了一个名为 add 的函数，它接收两个参数 a 和 b，并返回它们的和。在 .test 类名的样式中，我们调用了 add 函数，并传入了两个参数 100px 和 200px，最终得到了一个宽度为 300px 的样式。
LESS 内置函数的使用
除了自定义函数之外，LESS 还提供了许多内置函数，可以帮助我们更方便地编写样式。下面是一些常用的 LESS 内置函数：
lighten 和 darken
这两个函数可以让我们调整颜色的亮度和暗度，其语法如下：
lighten(@color, 10%); darken(@color, 10%);
其中，@color 是要调整的颜色值，10% 表示调整的量。例如：
.test {
background-color: lighten(#ff0000, 10%);
color: darken(#00ff00, 10%);
}在上面的代码中，我们使用 lighten 函数将红色的颜色值变亮了 10%，使用 darken 函数将绿色的颜色值变暗了 10%。
saturate 和 desaturate
这两个函数可以让我们调整颜色的饱和度，其语法如下：
saturate(@color, 10%); desaturate(@color, 10%);
其中，@color 是要调整的颜色值，10% 表示调整的量。例如：
.test {
background-color: saturate(#ff0000, 10%);
color: desaturate(#00ff00, 10%);
}在上面的代码中，我们使用 saturate 函数将红色的颜色值饱和度增加了 10%，使用 desaturate 函数将绿色的颜色值饱和度减少了 10%。
fadein 和 fadeout
这两个函数可以让我们调整颜色的透明度，其语法如下：
fadein(@color, 10%); fadeout(@color, 10%);
其中，@color 是要调整的颜色值，10% 表示调整的量。例如：
.test {
background-color: fadein(#ff0000, 10%);
color: fadeout(#00ff00, 10%);
}在上面的代码中，我们使用 fadein 函数将红色的颜色值透明度增加了 10%，使用 fadeout 函数将绿色的颜色值透明度减少了 10%。
自定义函数的实例
除了使用 LESS 内置函数之外，我们还可以自己定义一些函数，以便在编写样式时更加灵活。下面是一些自定义函数的实例：
rem
在移动端开发中，我们通常使用 rem 单位来适配不同的屏幕大小。但是，手动计算 rem 的值比较繁琐，我们可以使用 LESS 函数来简化这个过程：
// javascriptcn.com 代码示例
@baseFontSize: 16px;
.rem(@value) {
@remValue: unit(@value / @baseFontSize, rem);
@return @remValue;
}
.test {
font-size: .rem(24px);
}在上面的代码中，我们定义了一个名为 rem 的函数，它接收一个参数 @value，表示要转换的像素值。在函数体中，我们使用 LESS 的 unit 函数将像素值转换为 rem 值，并将结果保存到 @remValue 变量中。最后，使用 @return 关键字返回 @remValue 的值。在 .test 类名的样式中，我们调用了 rem 函数，并传入了一个 24px 的像素值，最终得到了一个 1.5rem 的样式。
gradient
在编写渐变背景样式时，我们通常需要写很长的代码，使用 LESS 函数可以简化这个过程：
// javascriptcn.com 代码示例
.gradient(@direction: top, @startColor: #fff, @endColor: #000) {
background: linear-gradient(to @direction, @startColor, @endColor);
}
.test1 {
.gradient();
}
.test2 {
.gradient(left, #00ff00, #ff0000);
}在上面的代码中，我们定义了一个名为 gradient 的函数，它接收三个参数：@direction 表示渐变方向，默认为 top；@startColor 表示渐变起始颜色，默认为 #fff；@endColor 表示渐变结束颜色，默认为 #000。在函数体中，我们使用 LESS 的 linear-gradient 函数生成渐变背景样式。在 .test1 和 .test2 类名的样式中，我们分别调用了 gradient 函数，并传入了不同的参数，最终得到了不同的渐变背景样式。
总结
LESS 中的函数是一个非常有用的功能，可以让我们在编写样式时更加灵活、方便。除了 LESS 内置函数之外，我们还可以自己定义一些函数，以便在编写样式时更加方便。希望本文对大家了解 LESS 函数有所帮助，也希望大家能够在实际项目中灵活运用 LESS 函数，提高代码的重用性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6567e220d2f5e1655d0b24b4