本文介绍 less 中的常用函数，正是由于这些函数的存在，使得开发者能够更好的使用 less 这一强大的样式工具。熟悉并掌握这些函数能够让你在 less 的使用上更上一层楼！
less 中的函数大致可以分成 9 种：
- 其他函数。
- 字符串函数。
- 长度相关函数。
- 数学函数。
- 类型函数。
- 颜色值定义函数。
- 颜色值通道提取函数。
- 颜色值运算函数。
- 颜色混合函数。
下面具体的来看每个种类中的具体函数及用法。
1. 其他函数
下面展示 LESS 中 color、convert、data-uri、default 和 unit 函数的基本用法。
1.1. color 函数
color 函数在 LESS 中用于从颜色字符串中提取颜色通道的值。
示例：
@myColor: #123456;
.example {
red-channel: red(@myColor); // 提取红色通道值
green-channel: green(@myColor); // 提取绿色通道值
blue-channel: blue(@myColor); // 提取蓝色通道值
alpha-channel: alpha(@myColor); // 如果颜色包含透明度，则提取透明度值
}
编译后的 CSS：
.example {
red-channel: 18;
green-channel: 52;
blue-channel: 86;
alpha-channel: 1;
}
1.2. convert 函数
convert 函数用于将数字从一种单位转换为另一种单位。
示例：
@sizeInInches: 2in;
.example {
size-in-cm: convert(@sizeInInches, cm); // 将英寸转换为厘米
}
编译后的 CSS：
.example {
size-in-cm: 5.08cm;
}
如果转换失败的话会照原样输出的：
@sizeInInches: 2px;
.example {
size-in-cm: convert(@sizeInInches, rem); // 将英寸转换为厘米
}
失败之后：
.example {
size-in-cm: 2px;
}
1.3. data-uri 函数
data-uri 函数用于将图片文件转换为 Base64 编码的 data URI，这样可以直接在 CSS 中嵌入图像，而不需要额外的 HTTP 请求。
示例：
.example {
background-image: data-uri('image.png'); // 假设 image.png 在相同目录下
}
编译后的 CSS：
.example {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...');
}
注意：data-uri 函数的具体输出取决于图片内容，这里只是一个简化的示例。
1.4. default 函数
default 函数用于检查一个变量是否有值，如果没有值则返回函数的第二个参数作为默认值。
示例 1 ：
.mixin(1) {x: 11}
.mixin(2) {y: 22}
.mixin(@x) when (default()) {z: @x}
div {
.mixin(3);
}
div.special {
.mixin(1);
}
编译后的 CSS：
div {
z: 3;
}
div.special {
x: 11;
}
示例 2 ：
.mixin(@value) when (ispixel(@value)) {width: @value}
// .mixin(@value) when (default()) {padding-left: (@value / 5)}
.mixin(@value) when not(default()) {padding: (@value / 5)}
div-1 {
.mixin(100px);
}
div-2 {
/* ... */
.mixin(100%);
}
编译后的 CSS：
div-1 {
width: 100px;
padding: 20px;
}
div-2 {
/* ... */
}
需要注意的是 when not(default()) 和 when (default()) 本身是互斥的，因此两个如果写在一起，一定会导致冲突。但是单独使用 when not(default()) 和 when (default()) 多次是可以的。
1.5. unit 函数
unit 函数用于移除或更改数字的单位。
示例：
@size: 10px;
.example {
no-unit: unit(@size); // 移除单位
new-unit: unit(@size, em); // 更改单位为 em
}
编译后的 CSS：
.example {
no-unit: 10;
new-unit: 10em;
}
2. 字符串函数
下面通过示例代码来说明 LESS 中的 escape、e、%、replace 和 unit 函数的作用和用法。
2.1 escape 函数
escape 函数用于对字符串中的特殊字符进行转义，以便能够在 CSS 中安全使用。
示例：
@identifier: "hello#world";
.example {
content: escape(@identifier); // 转义字符串中的特殊字符
}
编译后的 CSS：
.example {
content: hello%23world;
}
在这个例子中，# 被转义成了 %23。
2.2 e 函数
e 函数用于对转义的字符串进行解码，它是 escape 函数的逆操作。
示例：
@escapedString: "'hello.world'";
.example {
content: e(@escapedString); // 解码转义的字符串
}
编译后的 CSS：
.example {
content: 'hello.world';
}
需要注意的是分号之间的嵌套关系。
2.2.1 e 函数的使用
有些计算需要让浏览器计算而不是让 less 计算，这个时候就可以使用 e 函数：
div {
width: calc(~'960px-100px');
}
这个时候 less 编译完的结果是：
div {
width: calc(960px-100px);
}
而不是由
div {
width: calc(960px-100px); // calc('960px-100px'); 本身是错误的
}
生成的
div {
width: calc(860px);
}
2.3 % 函数
函数 %(string, arguments ...) 格式化一个字符串。
第一个参数是带占位符的字符串. 所有占位符始于百分号%后跟字母s,S,d,D,a, or A. 剩下的参数是替换占位符的表达式. 如果你需要输出百分号, 用双百分号转义%%.
如果你需要把特殊字符转义成 utf-8转义码请使用大写字母占位符，该占位符会转义所有的特殊字符除了()'~!。空格会被转义成%20。小写字母占位符会保留特殊字符的原样。
占位符:
d,D,a,A能被任何类型参数替换 (颜色值, 数字, 转义值, 表达式, …). 如果你在字符串中结合使用, 整个字符串参数都会替换进去 – 包括它的引号. 然后, 然后引号会被替换到字符串参数的原有位置, 也许会被转义或者还是不变的，取决于占位符是大写字母还是小写字母。s,S能被除了颜色值以为任何类型参数替换. 如果你在字符串中结合使用, 只会替换成字符串参数的值，而字符串参数引号都被忽略。
参数：
string: 带占位符的格式化字符串,anything* : 替换占位符的值。
返回： 格式化后的字符串 string。
示例 1 ：
.example {
format-a-d: %("repetitions: %a file: %d", 1 + 2, "directory/file.less");
format-a-d-upper: %('repetitions: %A file: %D', 1 + 2, "directory/file.less");
format-s: %("repetitions: %s file: %s", 1 + 2, "directory/file.less");
format-s-upper: %('repetitions: %S file: %S', 1 + 2, "directory/file.less");
}
编译后的 CSS：
.example {
format-a-d: "repetitions: 3 file: "directory/file.less"";
format-a-d-upper: 'repetitions: 3 file: %22directory%2Ffile.less%22';
format-s: "repetitions: 3 file: directory/file.less";
format-s-upper: 'repetitions: 3 file: directory%2Ffile.less';
}
示例 2 ：
.example {
font-family: %("%a %a", "Microsoft", "YaHei");
}
.example2 {
font-family: %("%A %A", "Microsoft", "YaHei");
}
.example3 {
font-family: %("%s %s", "Microsoft", "YaHei");
}
编译后的 CSS：
.example {
font-family: ""Microsoft" "YaHei"";
}
.example2 {
font-family: "%22Microsoft%22 %22YaHei%22";
}
.example3 {
font-family: "Microsoft YaHei";
}
2.4 replace 函数
replace 函数用于在字符串中替换指定的子字符串。
示例：
@string: "Hello, World!";
.example {
content: replace(@string, "World", "LESS"); // 将 "World" 替换为 "LESS"
}
编译后的 CSS：
.example {
content: "Hello, LESS!";
}
2.5 unit 函数
unit 函数用于去除或更改数字的单位。
示例：
@size: 10px;
.example {
no-unit: unit(@size); // 去除单位
new-unit: unit(@size, em); // 更改单位为 em
}
编译后的 CSS：
.example {
no-unit: 10;
new-unit: 10em;
}
3. 长度相关的函数
3.1 length 函数
.len {
n: length(1px solid #FFF);
}
可以看出来，使用 length 可以清楚的知道当前的属性复合值到底由几部分组成。
length 函数多用于列表中，可以方便的得到列表的长度：
@imgs: '1.png', '2.png', '3.png';
.len {
n: length(@imgs);
}
3.2 extract 函数
这个函数用于获取序列中某个特定位置的值，其格式为：
@imgs: '1.png', '2.png', '3.png';
@index: 2;
n: extract(@imgs, @index);
上述代码可使用 js 形象的表示为：
const n = @imgs[@index];
4. 数学函数
以下是对 LESS 中这些数学函数的详细解释和示例：
-
ceil函数
ceil函数用于向上取整。@num: 4.7; .example { value: ceil(@num); // 输出 5 } -
floor函数
floor函数用于向下取整。@num: 4.7; .example { value: floor(@num); // 输出 4 } -
percentage函数
percentage函数将数字转换为百分比字符串。@num: 0.75; .example { value: percentage(@num); // 输出 75% } -
round函数
round函数用于四舍五入到最接近的整数。@num: 4.7; .example { value: round(@num); // 输出 5 } -
sqrt函数
sqrt函数计算一个数的平方根。@num: 9; .example { value: sqrt(@num); // 输出 3 } -
abs函数
abs函数返回数字的绝对值。@num: -5; .example { value: abs(@num); // 输出 5 } -
三角函数（sin、cos、tan）
sin、cos、tan分别计算一个角度的正弦、余弦和正切值（角度以弧度为单位）。@angle: 45deg; .example { sin-value: sin(@angle); cos-value: cos(@angle); tan-value: tan(@angle); } -
反三角函数（asin、acos、atan）
asin、acos、atan分别是正弦、余弦和正切的反函数，它们返回一个角度（以弧度为单位）。@value: 0.5; .example { asin-value: asin(@value); acos-value: acos(@value); atan-value: atan(@value); } -
pi函数
pi函数返回圆周率的值。.example { pi-value: pi(); // 输出 3.141592653589793 } -
pow函数
pow函数返回底数的指数次幂。@base: 2; @exponent: 3; .example { pow-value: pow(@base, @exponent); // 输出 8 } -
mod函数
mod函数返回两数相除的余数。@dividend: 10; @divisor: 3; .example { mod-value: mod(@dividend, @divisor); // 输出 1 } -
min函数和max函数
min和max函数分别返回一组数中的最小值和最大值。@num1: 5; @num2: 10; @num3: 7; .example { min-value: min(@num1, @num2, @num3); // 输出 5 max-value: max(@num1, @num2, @num3); // 输出 10 }
请注意，这些函数的参数和返回值可能会根据 LESS 的版本和具体实现有所不同。此外，对于涉及角度的函数（如 sin, cos, tan, asin, acos, atan），LESS 可能需要将角度从度数转换为弧度，因此可能需要额外的函数或计算来进行转换。在上面的示例中，使用了 deg 后缀来表示角度，但在实际使用时，你可能需要根据 LESS 的版本和文档来确定正确的语法。
4.1 更多示例
示例 1 ：
.example {
width: unit(sin(pi() / 2),px);
}
编译后的 CSS：
.example {
width: 1px;
}
示例 2 ：
@fontSize: 14px;
.example {
width: pow(2px, 6);
height: pow(16px, 0.5);
line-height: mod(3px, 2);
font-size: min(12px, @fontSize);
}
编译后的 CSS：
.example {
width: 64px;
height: 4px;
line-height: 1px;
font-size: 12px;
}
5. 类型函数
类型函数是混合做重载的理想搭档。通过类型函数，我们可以根据输入值的不同单位做出不同的反应。再加上 default 函数和 Guard 表达式，就能够让混合成为完全体。
在 LESS 中，is* 函数系列用于检测某个值是否符合特定的类型或格式。下面对这些函数进行详细的解释：
-
isnumber函数
isnumber函数用于检测一个值是否为数字。@var1: 123; @var2: "text"; .example { is-number-var1: isnumber(@var1); // 返回 true is-number-var2: isnumber(@var2); // 返回 false }编译结果为：
.example { is-number-var1: true; is-number-var2: false; } -
isstring函数
isstring函数用于检测一个值是否为字符串。@var1: "Hello, World!"; @var2: 123; .example { is-string-var1: isstring(@var1); // 返回 true is-string-var2: isstring(@var2); // 返回 false } -
iscolor函数
iscolor函数用于检测一个值是否为颜色值。@color1: #ff0000; @color2: rgb(0, 255, 0); @notColor: "red"; .example { is-color1: iscolor(@color1); // 返回 true is-color2: iscolor(@color2); // 返回 true is-color3: iscolor(@notColor); // 返回 false } -
iskeyword函数
iskeyword函数检测一个值是否为 CSS 关键字。@keyword: solid; @notKeyword: "solid"; .example { is-keyword: iskeyword(@keyword); // 返回 true is-not-keyword: iskeyword(@notKeyword); // 返回 false } -
isurl函数
isurl函数检测一个值是否为合法的 URL。@url: url('http://example.com'); @notUrl: "http://example.com"; .example { is-url: isurl(@url); // 返回 true is-not-url: isurl(@notUrl); // 返回 false }这里所说的 url 指的是被 url() 包裹的字符串而不是字符串本身。
-
ispixel函数
ispixel函数用于检测一个值是否以像素为单位（例如，10px）。@pixel: 10px; @notPixel: 10em; .example { is-pixel: ispixel(@pixel); // 返回 true is-not-pixel: ispixel(@notPixel); // 返回 false } -
isem函数
isem函数检测一个值是否为em单位。@emValue: 10em; @notEm: 10px; .example { is-em: isem(@emValue); // 返回 true is-not-em: isem(@notEm); // 返回 false } -
ispercentage函数
ispercentage函数检测一个值是否为百分比单位。@percentage: 50%; @notPercentage: 0.5; .example { is-percentage: ispercentage(@percentage); // 返回 true is-not-percentage: ispercentage(@notPercentage); // 返回 false } -
isunit函数
isunit函数用于检测一个值是否包含单位（如px,em,%等）。注意，isunit不是检测特定单位，而是检测值是否包含任何单位。@unitValue: 10px; @unitless: 10; .example { is-unit: isunit(@unitValue); // 返回 true is-not-unit: isunit(@unitless); // 返回 false }
请注意，isunit 函数与其他 is* 函数略有不同，因为它检测的是值是否带有任何单位，而不仅仅是特定的一个单位。
在编写 LESS 代码时，请确保你的 LESS 编译器版本支持这些函数，因为不同版本的 LESS 可能会有不同的函数支持和语法。如果你在使用这些函数时遇到问题，建议查阅你所使用的 LESS 版本的官方文档。
5.1 更多例子
iskeyword 函数本质上检测的内容就是除了 1 'abc' red 这样的正常属性值。比如
.m(@x) when(iskeyword(@x)) {
color: red;
}
.example {
.m(ABC);
}
编译之后，
.example {
color: red;
}
6. 颜色函数
less 提供了相当复杂的颜色处理函数组，它们分别涉及颜色的定义、提取、运算和混合。由于有些着实不常见，所以列举在这里等到用的时候再查询。
6.1 颜色定义函数
6.2 通道提取函数
6.3 颜色值运算函数
6.4 颜色混合函数
原文链接：https://juejin.cn/post/7357151301220237349 作者：垂慕容
