之前介绍了一些LESS的一些函数,但是并不是很全,接下来咱们继续研究一下LESS自带的一些函数。并附带一些小例子。
sqrt(number)平方根
计算一个数的平方根,原样保持单位。参数:数字,浮点数;返回值,数字,平方根。
LESS代码
div {
width:sqrt(25px);
}
编译后的CSS代码
div {
width: 5px;
}
abs(number)绝对值
计算数字的绝对值,原样保持单位。参数:数字,浮点数;返回值:数字,绝对值。
LESS代码
div {
width:abs(-25px);
height:abs(25px);
}
编译后的CSS代码
div {
width: 25px;
height: 25px;
}
sin(number)
正弦函数,处理时会将没有单位的数字认为是弧度值。参数:数字,浮点数,角度;返回值,数字,角度对应的正弦值。
LESS代码
div {
/*1弧度角的正弦值*/
width:sin(1);
/*1角度角的正弦值*/
height:sin(1deg);
/*1百分度角的正弦值*/
padding:sin(1grad)
}
编译后的CSS代码
div {
/*1弧度角的正弦值*/
width: 0.8414709848078965;
/*1角度角的正弦值*/
height: 0.01745240643728351;
/*1百分度角的正弦值*/
padding: 0.015707317311820675;
}
asin(number)
反正弦函数,返回以弧度为单位的角度,区间在 -PI/2 到 PI/2之间。参数:数字,浮点数,代表正弦值,范围为 [-1,1];返回值,数字,角度。
LESS代码
div {
width:asin(2);
height:asin(0);
padding:asin(-0.8414709848078965);
}
编译后的CSS代码
div {
width: NaNrad;
height: 0rad;
padding: -1rad;
}
cos(number)
余弦函数,处理时会将没有单位的数字认为是弧度值。参数:数字,浮点数,角度;返回值,数字,角度对应的余弦值。
LESS代码
div {
/*1弧度角的余弦值*/
width:cos(1);
/*1角度角的余弦值*/
height:cos(1deg);
/*1百分度角的余弦值*/
padding:cos(1grad)
}
编译后的CSS代码
div {
/*1弧度角的余弦值*/
width: 0.5403023058681398;
/*1角度角的余弦值*/
height: 0.9998476951563913;
/*1百分度角的余弦值*/
padding: 0.9998766324816606;
}
acos(number)
反余弦函数,返回以弧度为单位的角度,区间在 0 到 PI之间。参数:数字,浮点数,代表余弦值,范围为 [-1,1];返回值,数字,角度。
LESS代码
div {
width:acos(0.5403023058681398);
height:acos(1);
padding:acos(2);
}
编译后的CSS代码
div {
width: 0.9999999999999999rad;
height: 0rad;
padding: NaNrad;
}
tan(number)
正切函数,处理时会将没有单位的数字认为是弧度值。参数:数字,浮点数,角度;返回值,数字,角度对应的正切值。
LESS代码
div {
/*1弧度角的余弦值*/
width:tan(1);
/*1角度角的余弦值*/
height:tan(1deg);
/*1百分度角的余弦值*/
padding:tan(1grad)
}
编译后的CSS代码
div {
/*1弧度角的余弦值*/
width: 1.5574077246549023;
/*1角度角的余弦值*/
height: 0.017455064928217585;
/*1百分度角的余弦值*/
padding: 0.015709255323664916;
}
atan(number)
反正切函数,返回以弧度为单位的角度,区间在 -PI/2 到 PI/2之间。参数:数字,浮点数,代表正切值;返回值,数字,角度。
LESS代码
div {
width:atan(-1.5574077246549023);
height:atan(0);
/*四舍五入输出6位小数*/
padding:round(atan(22), 6);
}
编译后的CSS代码
div {
width: -1rad;
height: 0rad;
/*四舍五入输出6位小数*/
padding: 1.525373rad;
}
pi()圆周率
返回圆周率PI。参数:无。返回值:数字,圆周率。
LESS代码
div {
width:pi()px;
}
编译后的CSS代码
div {
width: 3.141592653589793 px;
}
pow(@base, @exponent)幂
假设第一个参数为A,第二个参数为B,返回A的B次方。返回值与A有相同的单位,B的单位被忽略。参数:数字,浮点数,基数;数字,浮点数,冪指数。返回值:数字,基数的冪指数次方。
LESS代码
div {
width:pow(0cm, 0px)px;
height:pow(25, -2)px;
padding:pow(25, 0.5)px;
margin:pow(-25, 0.5)px;
top:pow(-25%, -0.5)em;
}
编译后的CSS代码
div {
width: 1cm px;
height: 0.0016 px;
padding: 5 px;
margin: NaN px;
top: NaN% em;
}