开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第20天,点击查看活动详情
Less提供了众多函数给我们使用,主要包括下列函数
一、类型函数
- isnumber 判断参数是否为数字
isnumber(@a) // 只要@a以数字开头即为true
isnumber(1) // true
isnumber(.3) // true,小数点支持省略0,编译后在CSS中会自动加上
- isstring 判断参数是否为字符串
isstring(@a) // 只有@a是用引号包裹,才视为字符串
isstring("1px") // true
isstring(#fff) // false
isstring('#fff') // true
- iscolor 判断参数是否为颜色值
iscolor(@a) // 只要是CSS中合法的颜色值都为true,包括十六进制、颜色名、rgba、rgb
iscolor(#fff) // true
iscolor(rgba(0,0,0,1)) // true
iscolor(red) // true
- iskeyword 判断参数是否为CSS关键字
iskeyword(@a) // 判断参数是否为CSS关键字,类似padding这种属性名
iskeyword(padding) // true
iskeyword(width) // true
iskeyword(red) // false 属性值不是关键字
- isurl 判断参数是否为url
isurl(@a) // 判断参数是否为url,必须是url(...)的值
- ispixel 判断参数是否为px单位的数字
ispixel(@a)
ispixel(1px) // true
ispixel(1rpx) // false
- isem 判断参数是否为em单位
isem(@a)
isem(1em) // true
isem(1px) // false
isem(1rpx) // false
- ispercentage 判断参数是否为百分比单位
ispercentage(@a)
isem(1em) // false
isem(1px) // false
isem(1rpx) // false
isem(100%) // true
- isunit 方法可以用作判断任意单位
isunit(@a,a) @a是需要判断的参数,a是判断的单位依据
isunit(33px, rem); // false
isunit(4rem, rem); // true
isunit(11px, px); // true
isunit(2.2%, px); // false
二、数学函数:
ceil(@a) // 四舍五入为整数
floor(@a) // 向下取整
percentage(@a) // 浮点数转百分比
round(@a) // 浮点四舍五入
sqrt(@a) // 取平方根
abs(@a) // 取绝对值
sin(@a) // 取弧度
asin(@a) // 反正弦
cos(@a) // 余弦
acos(@a) // 反余弦
tan(@a) // 正切
atan(@a) // 反正切
pi() // 圆周率
pow(x,y) // 取x的y次方
mod(x,y) // x对y取模(求余数)
min(x,y,z) // 取最小值
max(x,y,z) // 取最大值
三、字符串函数
escape(@a) // 将字符串中的特殊字符转义
e(@a) // 去除字符串的引号
replace() // 替换匹配的字符串
四、颜色定义函数
rgb(...); // 将rgb颜色转换为十六进制,接受参数为0~255数字或0%~100%的百分比
argb(...); // 将一个颜色对象转换为按argb顺序的十六进制,参数为一个颜色对象,
// 如:
argb(rgba(90, 23, 148, 0.5)); // #805a1794
hsl(...) // 将hsl颜色表示方法转换为十六进制
hsla(...); // 将hsla颜色表示法转换为rgba形式
hsv(...); // 将hsv颜色表示法转换为十六进制
hsva(...); // 将hsva颜色表示法转换为rgba形式
五、其他函数
image-size(url); // 得到指定图片的宽高px
image-width(url); // 得到指定图片的宽度px
image-height(url); // 得到指定图片的高度px