Less-内置函数

1. 内置数学函数

基本使用

@width: ceil(10.001);
.box{
  width: @width;
  height: @width;
  background-color: red;
}

 

 

 ceil方法表示向上取整

函数以及描述	实例	结果
ceil向上取整	ceil(10.001)	11
floor向下取整	floor(10.98)	10
percentage小数点转百分比	percentage(0.50)	50%
round四舍五入取整	round(5.50)	6
sqrt平方根	sqrt(16)	4
pow(x,y)返回x的y次幂	pow(2,3);	8
abs绝对值	abs(-1);	1
pi   π	pi()	3.1415926**
mod取余数，接收两个参数，返回第二个数值相比于第一个数值的余数	mod(9,2)	1
min返回集合的最小值	min(11,22,33,44,55)	11
max返回集合的最大值	max(11,22,33,44,55)	55

2. 列表函数

设置变量的时候可有多个参数，使用逗号隔开；

@list: 10px,20px,30px,40px,50px;
.box{
  width: @list;
  height: 100px;
}

 

 

 可以获取列表的长度length

@list: 10px,20px,30px,40px,50px;
.box{
  width: length(@list);
  height: 100px;
}

 

 

 获取列表中某一项的值

@list: 10px,20px,30px,40px,50px;
.box{
  width: extract(@list,3);
  height: 100px;
}

 注意：extract第二个参数表示选择列表中的某一项，注意下标是从1开始的，不是从0开始

 

3. 类型函数

基本使用

.mixin(@color) when(iscolor(@color)) {
  background: @color;
}

.box{
  width: 200px;
  height: 200px;
  .mixin(red)
}

 

 iscolor方法用来判断@color变量的值是否是一个颜色值

 

函数名称及描述	实例	结果
isnumber表示判断参数是否是数字类型	isnumber(100px) isnumber("100px")	true false
isstring表示判断参数是否是字符串类型	isstring(100px) isstring("100px")	false true
iscolor表示判断参数是否是颜色值	iscolor(red) iscolor(#aabbcc) iscolor(rgb(100,200,123)) iscolor (100px) iscolor ("100px")	true true true false false
iskeyword表示判断参数是否是关键字	iskeyword(style) iskeyword(when) iskeyword("100px")	true true false
isurl表示判断参数是否是url地址	isurl(url(a.jpg)) isurl(100px)	true false
ispixel表示判断参数是否是px为单位	ispixel(100px) ispixel(100%)	true false
isem表示判断参数是否是em为单位	isem(2em) isem(2px)	true false
ispercentage表示判断参数是否是%为单位	isem(2%) isem(2px)	true false
isunit表示判断是否是按照指定单位进行复制	isunit(100px,px) isunit(100em,px) isunit(100em,em) isunit(100px,em)	true false true false

 

4.  其他函数

  color函数表示可以将字符串类型颜色值转换为css可以识别的颜色值

@color: "red";
.box{
  width: 200px;
  height: 200px;
  background-color: color(@color);
}

 

可以获取和设置属性的单位

@unit: px;
.box{
  width: unit(100,@unit);
  height: unit(100,@unit);
  background: red;
}

 

 获取单位

.box{
  font-size: get-unit(100px);
  padding: get-unit(200);
}

 

 单位还可以进行转换

.box{
  width: convert(10cm,mm);
  height: convert(10cm,mm);
}