1,类型函数
- isnumber(value) - 判断是否为数字
- isstring(value) - 判断是否为字符串
- isurl(value) - 判断是否为url
- iscolor(value) - 判断是否为颜色
- isunit(value, unit) - 判断value值是否为指定单位
示例:
isnumber(12); // true
isnumber(#333); // false
isunit(12px, px); // true
isurl(url(...)); // true
2,逻辑函数
- if((condition), value1, value2) - 判断函数,condition表达式为true,返回value1,否则返回value2
- boolean(condition) - 判断表达式condition的真假
示例:
.main{
width: if((2 > 1), 10px, 20px);
}
@dark: boolean(2 > 1);
span{
color: if(@dark, #000, #fff);
}
3,数学函数
- ceil(value) - 向上取整
- floor(value) - 向下取整
- round(value) - 四舍五入
- percentage(value) - 将浮点数转换成百分比的字符串
- abs(value) - 绝对值
- sqrt(value) - 平凡根
- pow(value) - 乘方
- min(value1... valueN) - 取最小值
- max(value1... valueN) - 取最大值
示例:
ceil(2.1); // 3
percentage(0.5); // 50%
min(2px, 20px, 10px, 3px); // 2px
4,字符串函数
- escape(str) - 不带引号返回转移后的字符串,类似于url-encoding
- e(str) - 将字符串原样返回其内容,并不带引号
- replace(str, pattern, replacement) - 替换字符串中的文本
示例:
escape("id=22"); // id%3D22
@var: "hello";
.active:before{
content: e(@var); // hello
}
replace("hello, world", "world", "God"); // "hello, God"
5,列表函数
- length(list) - 返回长度
- extract(list, index) - 返回列表指定位置的值
- each(list, rules) - 循环list列表,为每个成员设置rules规则@key和@index为索引,@value为每项的值
示例:
length(2px 3px 4px); // 3
extract(2% 3% 4%, 2); // 3%
each(2px 3px 4px, {
.item-{@index} {
margin: @value;
}
})
// 编译后
.item-1 {
margin: 2px;
}
.item-2 {
margin: 3px;
}
.item-3 {
margin: 4px;
}
6,颜色函数
- color(str) - 将表示颜色的字符串转换为颜色
- lighten(colorObj, amount) - 增加颜色的亮度百分比
- darken(colorObj, amount) - 降低颜色的亮度百分比
- saturate(colorObj, amount) - 增加颜色的饱和度百分比
- fade(colorObj, amount) - 设置颜色的透明度
- mix(color1, color2, weight) - 按比例混合两种颜色
示例:文章来源:https://www.toymoban.com/news/detail-706623.html
color("#333"); // #333
lighten(hsl(90, 80%, 50%), 20%); // #b3f075
mix(#ff0000, #0000ff, 50%); // #800080
7,其他函数
- image-size("file.png") - 返回文件的尺寸,例如10px 10px
- image-width("file.png") - 返回文件的宽
- image-size("file.png") - 返回文件的高
- convert(value, unitName) - 将数值从当前单位转换成另一个单位
示例:文章来源地址https://www.toymoban.com/news/detail-706623.html
image-size("file.png"); // 20px 30px
image-width("file.png"); // 20px
convert(10cm, mm); // 100mm
到了这里,关于Less常用内置函数的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!