Less从0开始:常用的内置函数

135 阅读2分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 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