Less常用内置函数

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) - 按比例混合两种颜色

示例：

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) - 将数值从当前单位转换成另一个单位

示例：

image-size("file.png"); // 20px 30px
image-width("file.png"); // 20px
convert(10cm, mm); // 100mm