1、floor()
作用:向下取整
编译前:
div{
width:floor(1.8px)
}
编译后:
div{
width:1px
}
2、ceil()
作用:向上取整
编译前:
div{
width:ceil(1.3px)
}
编译后:
div{
width:2px
}
3、round()
作用:四舍五入
编译前:
div{
width:round(1.8px);
height:round(1.2px);
}
编译后:
div{
width:2px;
height:1px;
}
4、min()
作用:最小值
编译前:
div{
width:min(1px,2px,3px)
}
编译后:
div{
width:1px
}
5、max()
作用:最大值
编译前:
div{
width:max(1px,2px,3px)
}
编译后:
div{
width:3px
}
6、percentage()
作用:浮点数转换成百分比
编译前:
div{
width:percentage(1px)
}
编译后:
div{
width:100%
}
7、sqrt()
作用:当前数值的平方根
编译前:
div{
width:sqrt(4px)
}
编译后:
div{
width:2px
}
8、abs()
作用:当前数值的绝对值
编译前:
div{
width:abs(-2px);
height:abs(2px);
}
编译后:
div{
width:2px;
height:2px;
}
9、pin()
作用:π值
编译前:
div{
width:pin();
}
编译后:
div{
width:3.1415926;
}
10、pow()
作用:乘方运算
编译前:
div{
width:pow(2px,3);
height:pow(2%,3);
}
编译后:
div{
width:8px;
height:8%;
}
11、mod()
作用:取模运算
编译前:
div{
width:mod(3px,2);
}
编译后:
div{
width:1px;
}
12、sin() asin() cos() acos() tan() atan()
作用:正弦 反正弦 余弦 反余弦 正切 反正切
(正弦为例)编译前:
div{
width:sin(1);//1弧度的正弦值,没单位默认弧度制(rad)
width:sin(1deg);//1度的正弦值
width:sin(1grad);//1梯度的正弦值
}
编译后:
div{
width:0.84147098;
width:0.01745241;
width:0.01570732;
}
13、isnumber()
作用:检查传入值是否为数字,返回boolean
编译前:
@num:1;
@str:'1';
div{
width:if(isnumber(@num),1px,10px);
height:if(isnumber(@str),1px,10px);
}
编译后:
div{
width:1px;
height:10px;
}
14、isstring()
作用:检查传入值是否为字符串,返回boolean
编译前:
@num:1;
@str:'1';
div{
width:if(isstring(@num),1px,10px);
height:if(isstring(@str),1px,10px);
}
编译后:
div{
width:10px;
height:1px;
}
15、iscolor()
作用:检查传入值是否为颜色(支持RGB或者十六进制),返回boolean
编译前:
@black:black;
@white:white;
div{
color:if(iscolor(1),@black,@white);
background-color:if(iscolor(#fff),@black,@white);
}
编译后:
div{
color:white;
background-color:black;
}
16、iskeyword()
作用:检查传入值是否为关键字,返回boolean
编译前:
div{
width:iskeyword(height)
}
编译后:
div{
width:true
}
17、isurl()
作用:检查传入值是否为URL地址,返回boolean
编译前:
div{
width:isurl(url());
width:isurl(url('www.baidu.com'));
width:isurl('www.baidu.com');
}
编译后:
div{
width:true;
width:true;
height:false;
}
18、ispixel()
作用:检查传入值是否为像素单位的数字,返回boolean
编译前:
div{
width:ispixel(2px);
width:ispixel(2%);
width:ispixel(2rem);
width:ispixel(2em);
}
编译后:
div{
width:true;
width:false;
width:false;
width:false;
}
19、isem()
作用:检查传入值是否为em单位的数字,返回boolean
编译前:
div{
width:isem(2em);
width:isem(2px);
width:isem(2%);
width:isem(2rem);
}
编译后:
div{
width:true;
width:false;
width:false;
width:false;
}
20、ispercentage()
作用:检查传入值是否为百分比单位的数字,返回boolean
编译前:
div{
width:ispercentage(2em);
width:ispercentage(2px);
width:ispercentage(2%);
width:ispercentage(2rem);
}
编译后:
div{
width:false;
width:false;
width:true;
width:false;
}
21、isunit()
作用:检查传入值是否为指定单位的数字,返回boolean
编译前:
.m(@x) when isunit((@x,px)){
width:@x;
}
div{
.m(200px);
.m(200%);
.m(200em);
}
编译后:
div{
width:200px;
}
22、saturation()
作用:获取颜色值中的饱和度
编译前:
div {
width:saturation(hsl(90, 90%, 80%));
}
编译后:
div{
width:90%;
}
23、lightness()
作用:获取颜色值中的亮度
编译前:
div {
width:lightness(hsl(90, 90%, 80%));
}
编译后:
div{
width:80%;
}
24、hsvhue()
作用:获取颜色值中的色调值
编译前:
div {
width:hsvhue(hsv(90, 90%, 80%));
}
编译后:
div{
width:90;
}
25、hsvsaturation()
作用:获取HSV颜色模型中的饱和度值
编译前:
div {
width:hsvsaturation(hsv(90, 90%, 80%));
}
编译后:
div{
width:90%;
}
26、hsvvalue()
作用:获取HSV颜色模型中的透明度值
编译前:
div {
width:hsvvalue(hsv(90, 90%, 80%));
}
编译后:
div{
width:80%;
}
27、red()
作用:获取颜色中的红色值
编译前:
div {
width:red(rgb(0,127,255));
height:red(#007FFF);
}
编译后:
div{
width:0;
height:0;
}
28、green()
作用:获取颜色中的绿色值
编译前:
div {
width:green(rgb(0,127,255));
height:green(#007FFF);
}
编译后:
div{
width:127;
height:127;
}
29、blue()
作用:获取颜色中的蓝色值
编译前:
div {
width:blue(rgb(0,127,255));
height:blue(#007FFF);
}
编译后:
div{
width:255;
height:255;
}
30、alpha()
作用:获取颜色中的透明度值
编译前:
div {
width:alpha(rgba(0,127,255,.5));
}
编译后:
div{
width:0.5;
}
31、luma()
作用:获取颜色中的亮度百分比
编译前:
div {
width:luma(rgb(0,127,255));
}
编译后:
div{
width:22.39874377%;
}