less里面的内置函数

一、if()函数

• 根据条件返回两个值之一。
• 参数：
• （1）condition: 一个布尔表达式
• （2）value1: 如果condition为真则返回一个值。
• （3）value2：如果condition不为真则返回一个值。
• if()—中间写法类似三元

@w:50px;
@h:50px;
@max:-10;
//if()---中间写法类似三元
.box{
   width:if(@max>0,@w,@w * 2);
   height:if(@max>0,@w,@w * 2);
   border: 1px solid #000;
}

二、boolean()函数

• 参数：condition: 一个布尔表达式
• boolean()—返回true或者false

@w:50px;
@h:50px;
@max:-10;
//boolean()---返回true或者false
@bool:boolean(@max>0);
.box{
 width: if(@bool,@w,@w*2);
 height: if(@bool,@w,@w*2);
 border: 1px solid #000;
}

三、escape()函数

• 将URL 编码应用于输入字符串中的特殊字符。
• 参数：：string要转义的字符串。
• 返回：string不带引号的转义内容。

	console.log(escape('a=1'));//a%3D1

四、length()

• length()—返回长度（值长度）

//length()---返回长度（值长度）
@str:red,blue,black;
.box{
 width: length(@str);//3
}

五、extract()函数

• extract()—返回集合值里面某个位置的值
• 返回列表中指定位置的值。
• 参数
• （1）list—逗号或空格分隔的值列表。
• （2）index—一个整数，它指定要返回的列表元素的位置。

//extract()---返回集合值里面某个位置的值
@str:red,blue,black;
.box{
 background-color: extract(@str,2);//blue
}

六、range()函数

• 生成跨越一系列值的列表
• 参数
• （1）start—（可选）起始值，例如 1 或 1px
• （2）end— 最终值，例如 5px
• （3）step—（可选）要增加的数量

//range()---写一个参数，返回当前值以下的值
range(4);//1 2 3 4
range(10px,40px,10);//10px 20px 30px 40px

七、each()函数

• 将规则集的评估绑定到列表的每个成员。

//each--遍历集合值，value指当前值，index当前值索引
@str:red,blue,black;
each(@str,{
 .box@{index}{
   background-color: @value;//绑定属性值@value
 }
})
//red blue black

八、数学函数

1. ceil—向上取整

2. floor—向下取整

3. percentage—取百分比的

4. round—四舍五入

5. sqrt—开平方

6. abs—取绝对值

7. min—取最小值

8. max—取最大值的

九、类型函数

1. isnumber() 检测值是否是数字类型

• 如果值是数字则返回true，否则返回false。
• 参数：value—正在评估的值或变量。

2. isstring() 检测是否是字符串

• 如果值是字符串则返回true，否则返回false。
• 参数：value—正在评估的值或变量。

3. iscolor() 检测是否是颜色

• 如果值是颜色则返回true，否则返回false。
• 参数：value—正在评估的值或变量。

4. isurl(url(…)) 检测是否是路径 url()

• 如果值是 url返回true，否则返回false。
• 参数：value—正在评估的值或变量。

十、颜色定义函数

1. rgb()

• 从十进制红色、绿色和蓝色 (RGB) 值创建一个不透明的颜色对象。
• 参数：
• （1）red: 整数 0-255 或百分比 0-100%。
• （2）green: 整数 0-255 或百分比 0-100%。
• （3）blue: 整数 0-255 或百分比 0-100%。

2. rgba()

• 从十进制红色、绿色、蓝色和 alpha (RGBA) 值创建透明颜色对象。
• 参数：
• （1）red: 整数 0-255 或百分比 0-100%。
• （2）green: 整数 0-255 或百分比 0-100%。
• （3）blue: 整数 0-255 或百分比 0-100%。
• （4）alpha：数字 0-1 或百分比 0-100%。

3. hsl()

• hsl(0,100%,50%)
• 根据色调、饱和度和亮度 (HSL) 值创建不透明的颜色对象。
• 参数：
• （1）hue: 表示度数的整数 0-360。
• （2）saturation：百分比 0-100% 或数字 0-1。
• （3）lightness：百分比 0-100% 或数字 0-1。

4. hsla()

• hsla(0,100%,50%,0.5);
• 从色调、饱和度、亮度和 alpha (HSLA) 值创建透明颜色对象。
• 参数：
• （1）hue: 表示度数的整数 0-360。
• （2）saturation：百分比 0-100% 或数字 0-1。
• （3）lightness：百分比 0-100% 或数字 0-1。
• （4）alpha：百分比 0-100% 或数字 0-1。

5. hsv()

• hsv(0,100%,50%);
• 从色调、饱和度和值 (HSV) 值创建不透明的颜色对象。
• 参数：
• （1）hue: 表示度数的整数 0-360。
• （2）saturation：百分比 0-100% 或数字 0-1。
• （3）value：百分比 0-100% 或数字 0-1。

6. hsva()

• hsva(0,100%,50%,0.5);
• 从色调、饱和度、值和 alpha (HSVA) 值创建透明颜色对象。
• 参数：
• （1）hue: 表示度数的整数 0-360。
• （2）saturation：百分比 0-100% 或数字 0-1。
• （3）value：百分比 0-100% 或数字 0-1。
• （4）alpha：百分比 0-100% 或数字 0-1。

十一、颜色通道功能

1. hue()—提取 HSL 颜色空间中颜色对象的色调通道。

• hue(hsl(90, 100%, 50%));//90

2. saturation()—提取 HSL 颜色空间中颜色对象的饱和度通道。

• saturation(hsl(90, 100%, 50%));//100%

3. lightness()—提取 HSL 颜色空间中颜色对象的亮度通道。

• lightness(hsl(90, 100%, 50%));//50%

4. red()—提取颜色对象的红色通道。

• red(rgb(10, 20, 30));//10

5. green()—提取颜色对象的绿色通道。

• green(rgb(10, 20, 30));//20

6. blue()—提取颜色对象的蓝色通道。

• blue(rgb(10, 20, 30));//30

7. alpha()—提取颜色中透明度。

• alpha(rgba(10, 20, 30, 0.5));//0.5

十二、颜色混合功能

1. multiply()—将两种颜色相乘。

• 将两种颜色相乘。两种颜色中的每一种颜色对应的 RGB 通道相乘，然后除以 255。结果是颜色更深。
• multiply(#fff,#000);//#fff * #000最终颜色除255，颜色变深

2. screen()—两个颜色混合，更浅

3. overlay()—结合了multiply和的效果screen。有条件地使亮通道更亮，暗通道更暗。

• overlay(rgb(138, 128, 128),rgb(241, 14, 14));//比暗色更暗，亮色更亮

4. softlight()—两个色混合之后使得更柔和

• softlight(rgb(109, 224, 42),#0ef1e6);//两个色混合之后更柔和

5. hardlight()—高亮

• hardlight(rgb(109, 224, 42),#0ef1e6);//高亮

6. difference()—两个相减，如果是负值取反向

• difference(rgb(109, 224, 42),#0ef1e6);//两个相减，负值 取反向

7. exclusion()

• exclusion(rgb(109, 224, 42),#0ef1e6) 混合色

8. average()

• average(rgb(109, 224, 42),#0ef1e6) 平均色

9. negation()

• negation(#ff6600, #000000); difference反方法