关于前端:Less函数详解数学函数类型函数颜色函数做下记录便于开发

26次阅读

共计 3405 个字符,预计需要花费 9 分钟才能阅读完成。

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

正文完
 0