之前介绍了一些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; }