Skip to content
W3S101

Less - 数学函数

LESS - 数学函数

Section titled “LESS - 数学函数”

描述

Section titled “描述”

LESS 提供了一组内置的数学函数用于执行数值运算。这些函数可以处理带有或不带单位的数字。当涉及单位时，LESS 会尝试正确计算它们（例如，2px * 2 = 4px）。

下表列出了 LESS 中可用的常用数学函数：

ID函数与描述示例与输出
1ceil(number)
将数字向上舍入到下一个最高的整数。		ceil(2.3)

编译为：
3
2floor(number)
将数字向下舍入到下一个最低的整数。		floor(2.8)

编译为：
2
3percentage(number)
将浮点数（0-1）转换为百分比字符串。		percentage(0.75)

编译为：
75%
4round(number, decimalPlaces?)
将数字四舍五入到最接近的整数或指定的十进制位数（可选）。		round(3.14159, 2)

编译为：
3.14

round(3.7)

编译为：
4
5sqrt(number)
计算数字的平方根。如果可能，结果的单位将是输入单位的平方根（例如，sqrt(16px*px) 可能是 4px，但 sqrt(16px) 会出错）。最好与无单位数字一起使用，或确保有效的单位数学运算。		sqrt(25)

编译为：
5
6abs(number)
计算数字的绝对值，保留其单位。		abs(-15px)

编译为：
15px
7sin(angle)
计算角度的正弦值。需要一个无单位数字（弧度）或一个带有角度单位（deg, grad, rad, turn）的数字。		sin(1rad)

近似编译为：
0.8414709848
8asin(number)
计算数字的反正弦（正弦的倒数）。返回 -pi/2 到 pi/2 之间的弧度角度。		asin(1)

近似编译为：
1.5707963268rad (pi/2)
9cos(angle)
计算角度的余弦值。需要一个无单位数字（弧度）或一个带有角度单位的数字。		cos(0)

编译为：
1
10acos(number)
计算数字的反余弦（余弦的倒数）。返回 0 到 pi 之间的弧度角度。		acos(-1)

近似编译为：
3.1415926536rad (pi)
11tan(angle)
计算角度的正切值。需要一个无单位数字（弧度）或一个带有角度单位的数字。		tan(45deg)

近似编译为：
1
12atan(number)
计算数字的反正切（正切的倒数）。返回 -pi/2 到 pi/2 之间的弧度角度。也可以接受两个参数 atan(y, x) 来计算坐标的角度。		atan(1)

近似编译为：
0.7853981634rad (pi/4)
13pi()
返回数学常数 Pi。		pi()

近似编译为：
3.141592653589793
14pow(base, exponent)
计算第一个参数的第二个参数次幂。		pow(2, 3)

编译为：
8
15mod(number1, number2)
计算第一个参数除以第二个参数的模数（余数）。处理负数和浮点数。		mod(10, 3)

编译为：
1
16min(value1, value2, …)
返回一个或多个参数中的最小数值。参数应具有兼容的单位或为无单位数字。		min(10px, 5px, 12px)

编译为：
5px
17max(value1, value2, …)
返回一个或多个参数中的最大数值。参数应具有兼容的单位或为无单位数字。		max(10, 25, 15)

编译为：
25

实践中使用数学函数：

Section titled “实践中使用数学函数：”

数学函数常用于变量，以创建动态和易于维护的样式表。例如，根据基本值计算动态填充或字体大小。

考虑以下示例：

@base-font-size: 16px;
@scale-factor: 1.5;


.title {
  font-size: round(@base-font-size * @scale-factor);
  line-height: percentage(1.4);
}


.container {
  padding: ceil(@base-font-size / 2);
}

这段 LESS 代码将编译为：

.title {
  font-size: 24px; /* 16 * 1.5 = 24 */
  line-height: 140%;
}


.container {
  padding: 8px; /* 16 / 2 = 8 */
}

进一步学习：

Section titled “进一步学习：”

有关单位转换和严格数学模式的详细信息，请参阅 LESS 官方文档关于 Operations 的章节。