现在的位置: 首页 > 综合 > 正文

LESS详解之函数(二)

2014年09月05日 ⁄ 综合 ⁄ 共 2323字 ⁄ 字号 评论关闭

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

抱歉!评论已关闭.