LESS 是一种 CSS 预处理器，它提供了许多强大的功能来简化样式表的编写。其中，自定义函数和正则表达式是两个非常重要的功能，可以帮助开发者更加高效、便捷地编写样式代码。本文将详细介绍 LESS 的自定义函数和正则表达式，包括它们的基本语法、使用方法和示例代码，帮助读者更好地掌握这两个功能。
LESS 自定义函数
LESS 自定义函数是一种自定义的样式函数，可以接受参数并返回值。通过自定义函数，可以将常用的样式代码封装成一个函数，从而提高代码的复用性和可维护性。LESS 的自定义函数使用 @function 关键字定义，语法如下：
@function 函数名(参数1, 参数2, ...) {
// 函数体
@return 返回值;
}其中，函数名是自定义的函数名称，参数1、参数2 等是函数的参数，函数体是函数的具体实现，@return 是返回值。下面是一个简单的自定义函数示例，用于计算两个数的和：
@function add($a, $b) {
@return $a + $b;
}
// 使用自定义函数
div {
width: add(100px, 200px);
}在上面的代码中，我们定义了一个 add 函数，它接受两个参数 $a 和 $b，并返回它们的和。在 div 元素的样式中，我们使用了 add 函数来计算宽度，结果为 300px。
除了简单的数学计算，自定义函数还可以用于处理字符串、颜色等数据类型。下面是一个示例，用于将颜色加深：
@function darkenColor($color, $amount) {
@return darken($color, $amount);
}
// 使用自定义函数
div {
background-color: darkenColor(#f00, 20%);
}在上面的代码中，我们定义了一个 darkenColor 函数，它接受两个参数 $color 和 $amount，其中 $color 是颜色值，$amount 是加深的程度。在 div 元素的样式中，我们使用了 darkenColor 函数来将 #f00 颜色加深 20%。
LESS 正则表达式
LESS 正则表达式是一种用于匹配字符串的模式，可以用于过滤、替换等操作。LESS 的正则表达式使用 ~"正则表达式" 的形式表示，其中，正则表达式需要用双引号括起来。下面是一个简单的正则表达式示例，用于匹配所有以 .test 结尾的类名：
div[class~="\.test"] {
color: red;
}在上面的代码中，我们使用了 [class~=".test"] 选择器，它可以匹配所有包含 .test 类名的元素。其中，\ 表示转义，.test 表示匹配 .test 字符串。在 div 元素的样式中，我们将颜色设置为红色。
除了基本的匹配，正则表达式还可以用于替换、捕获等高级操作。下面是一个示例，用于将所有的空格替换为下划线：
@str: "hello world";
@result: replace(@str, " ", "_");
// 输出结果
div {
content: @result;
}在上面的代码中，我们使用了 replace 函数，它接受两个参数，第一个参数是要替换的字符串，第二个参数是替换的目标字符串。在 div 元素的样式中，我们将 @result 变量输出到 content 属性中，结果为 "hello_world"。
总结
本文介绍了 LESS 的自定义函数和正则表达式，包括它们的基本语法、使用方法和示例代码。自定义函数可以帮助开发者封装常用的样式代码，提高代码的复用性和可维护性；正则表达式可以用于过滤、替换等高级操作，帮助开发者更加高效地编写样式代码。希望本文能够帮助读者更好地掌握 LESS 的自定义函数和正则表达式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65d44477add4f0e0ffc4959c