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%;}