Less函数库大全

字符串函数

（1）escape()
功能：将输入字符串的url特殊字符进行编码处理

不转义的编码：, / ? @ & + ’ ~ ! $
转义的编码：# ^ ) ( } { | ; > < : ] [ =

d:escape('#, ^, (, ), {, }, |, :, >, <, ;, ], [ , =');

（2）e()
功能：css转义用~“值”符号代替

filter: e("ms:alwaysHasItsOwnSyntax.For.Stuff()");
filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
 //css3新增属性 能让你给元素做计算
width: calc(960px-100px);
//原样输出，让浏览器自己运算
width: calc(~'960px-100px');

（3）%()
功能：函数%(string,arguments…) 格式化一个字符串

font-family: %( "%a %a" , "Microsoft", "YaHei");
编译结果: font-family: ""Microsoft" "YaHei"";
font-family: %( "%A %a" , "Microsoft", "YaHei");
编译结果: font-family: "%22Microsoft%22 "YaHei"";
font-family: %( "%s %s" , F60, "YaHei");
编译结果: font-family: %( "%s %s" , "Microsoft", "YaHei");
font-family: "Microsoft YaHei";

（4）replace()
功能：用另一个字符串替换文本

content: replace("Hello, maizi", "maizi", "LESS");
编译结果：content:"Hello, LESS";
content: replace("Hello, A", "A", "B");
编译结果：content:"Hello, B";

长度函数

（1）length()
功能：返回集合中值的个数

n:length(1px solid #0080ff);
编译后：n:3

（2）extract()
功能：返回集合中指定索引的值

@list: "A", "B", "C", "D";
n:extract(@list,4) // n:"D";

数学函数

（1）ceil()
功能：向上取整

width: ceil(2.9999999px);
//3px

（2）floor()
功能：向下取整

height: floor(2.9999999px); 
//2px

（3）percentage()
功能：将浮点数转换为百分比

width:percentage( 0.5px); 
//将浮点数转换为百分比 50%

（4）round()
功能：取整和四舍五入

width:4.5px ;
width:round(4.5px) ; 
//5px

（5）sprt()
功能：计算一个数的平方根，原样保持单位

width: sqrt(16px);
 //4px
width: sqrt(9px);
 //3px

（6）abs()
功能：计算数字的绝对值，原样保持单位

top: -999px;
top: abs(-999px);
//999px

（7）sin()
功能：正弦函数

width: sin(1); 
//1弧度角的正弦值
width: sin(1deg);
//1角度角的正弦值
width: sin(1grad); 
//1百分度角的正弦值

（8）asin()
功能：反正弦函数

width: asin(-0.84147098);
width: asin(0);
width: asin(2);

（9）cos()
功能：余弦函数

width: cos(1);
 //1弧度角的余弦值
width: cos(1deg);
//1角度角的余弦值
width: cos(1grad);
 //1百分度角的余弦值

（10）acos()
功能：反余弦函数

（11）tan()
功能：正切函数

width: tan(1);
//1弧度角的正切值
width: tan(1deg);
//1角度角的正切值
width: tan(1grad);
//1百分度角的正切值

（12）atan()
功能：反正切函数

（13）pi()
功能：返回π(pi)

width: pi();
 //3.14159265

（14）pow()
功能：乘方运算

width: pow(2px,2); 
//4px
width: pow(3px,2); 
//9px
width: pow(4px,2); 
//16px
width: pow(25px,0.5); 
//5px

（15）mod()
功能：取余运算

width: mod(3px,2); 
//1px

（16）min()
功能：最小值运算

width: min(3px,2px,6px); 
//2px

（17）max()
功能：最大值运算

width: min(3px,2px,6px); 
//6px

类型函数

（1）isnumber()
功能：如果值是数字，返回真（true），否则返回假（false）

//如果一个值是一个数字，返回'真(true)',否则返回'假(false)'.
.m(@x) when (isnumber(@x)) {
x:@x
}
div{
.m(123); //x:123
.m(ABC);
}

（2）isstring()
功能：如果值是一个字符串，返回真（true），否则返回假（false）

//如果一个值是一个字符串，返回'真(true)',否则返回'假(false)'.
.m(@x) when (isstring(@x)) {
x:@x
}
div{
.m(123);
.m("ABC"); //x:"ABC"
}

（3）iscolor()
功能：如果值是一个颜色，返回真（true），否则返回假（false）

//如果一个值是一个颜色，返回'真(true)',否则返回'假(false)'.
.m(@x) when (iscolor(@x)) {
x:@x
}
div{
.m(123);
.m(red); //x:#ff0000
}

（4）iskeyword()
功能：如果值是一个关键字，返回真（true），否则返回假（false）

//如果一个值是一个关键字，返回'真(true)',否则返回'假(false)'.
.m(@x) when (iskeyword(@x)) {
x:@x
}
div{
.m(123);
.m("ABC");
.m(red);
.m(ABC); //x:ABC
}

（5）isurl()
功能：如果值是一个url地址，返回真（true），否则返回假（false）

//如果一个值是一个url地址，返回'真(true)',否则返回'假(false)'.
.m(@x) when (isurl(@x)) {
x:@x
}
div{
.m(ABC);
.m(url(arr.jpg)); //x:url(arr.jpg)
}

（6）ispixel()
功能：如果值是带px单位的数字，返回真（true），否则返回假（false）

//如果一个值是带像素长度单位的数字，返回'真(true)',否则返回'假(false)'.
.m(@x) when (ispixel(@x)) {
x:@x
}
div{
.m(220px); //x:220px
.m(220cm);
}

（7）issem()
功能：如果值是带em单位的数字，返回真（true），否则返回假（false）

//如果一个值是带em长度单位的数字，返回'真(true)',否则返回'假(false)'.
.m(@x) when (isem(@x)) {
x:@x
}
div{
.m(220px);
.m(240em); //x:240em
}

（8）ispercentage()
功能：如果值是一个带%单位的数字，返回真（true），否则返回假（false）

//如果一个值是带百分比单位的数字，返回'真(true)',否则返回'假(false)'.
.m(@x) when (ispercentage(@x)) {
x:@x
}
div{
.m(220px);
.m(240em);
.m(260%); //x:260%
}

（9）isunit()
功能：如果值是带指定单位的数字，返回真（true），否则返回假（false）

//如果一个值是带指定单位的数字，返回'真(true)',否则返回'假(false)'.
.m(@x) when (isunit(@x,em)) {
x:@x
}
div{
.m(123);
.m(220px);
.m(240em); //x:240em
.m(280em); //x:280em
.m(290em); //x:290em
.m(260%);
}

颜色值定义函数

（1）rgb()
功能：通过十进制红、绿、蓝（RGB）创建不透明的颜色对象

//通过十进制红色，绿色，蓝色三种值 (RGB) 创建不透明的颜色对象
div{
background: rgb(255,0,0);
background: rgb(100%,0%,0%);
}

（2）rgba()
功能：通过十进制红、绿、蓝（RGB），以及alpha四种值（RGBA）创建带alpha透明的颜色对象

//通过十进制红色，绿色，蓝色，以及 alpha 四种值 (RGBA) 创建带alpha透明的颜色对象
div{
background: rgba(255,0,0,0.5);
background: rgba(100%,0%,0%,0.5);
}

（3）argb()
功能：创建格式为#AARRGGBB的十六进制颜色，用于IE滤镜，.net和安卓开发

//创建格式为 #AARRGGBB 的十六进制 (hex representation) 颜色 (注意不是 #RRGGBBAA )
div{
background: argb(rgba(255,0,0,0.5));
background: argb(rgba(100%,0%,0%,0.5));
}

（4）hls()
功能：通过色相，饱和度，亮度（HLS）三种值创建不透明的颜色对象

//通过色相 (hue)，饱和度 (saturation)，亮度 (lightness) 三种值 (HSL) 创建不透明的颜色对象
div{
background: hsl(90,100%,50%);
}

（5）hsla()
功能：通过色相，饱和度，亮度，以及alpha四种值（HLSA）创建带alpha透明的颜色对象

//通过色相 (hue)，饱和度 (saturation)，亮度 (lightness)，以及 alpha 四种值 (HSLA) 创建透明的颜色对象
div{
background: hsla(90,100%,50%,0.5);
}

（6）hsv()
功能：通过色相，饱和度，色调（HSV）创建不透明的颜色对象

//通过色相 (hue)，饱和度 (saturation)，色调 (value) 三种值 (HSV) 创建不透明的颜色对象
div{
background: hsv(90,100%,50%);
}

（7）hsva()
功能：通过色相，饱和度，亮度，以及alpha四种值（HSVA）创建带alpha透明的颜色对象

//通过色相 (hue)，饱和度 (saturation)，色调 (value)，以及 alpha 四种值 (HSVA) 创建透明的颜色对象
div{
background: hsva(90,100%,50%,8%);
}

颜色值通道提取函数

（1）hue()
功能：从HSL色彩空间中提取色相值

// hue()色相值
z-index: hue(hsl(90,100%,50%)); 
//90

（2）saturation()
功能：从HSL色彩空间中提取饱和度

//saturation()饱和度
z-index: saturation(hsl(90,80%,50%)); 
//80%

（3）lightness()
功能：从HSL色彩空间中提取亮度值

//lightness()亮度值
z-index: lightness(hsl(90,100%,100%)); 
//100%

（4）hsvhue()
功能：从HSV色彩空间中提取色相值

hsv(90,100%,50%)
z-index:hsvhue( hsv(90,100%,50%)); 
//函数90

（5）hsvsaturation()
功能：从HSV色彩空间中提取饱和度值

z-index:hsvsaturation( hsv(90,100%,50%)); 
//函数100%

（6）hsvvalue()
功能：从HSV色彩空间中提取色调值

z-index:hsvvalue( hsv(90,100%,50%)); 
//函数50%

（7）red()
功能：提取颜色对象的红色值

//rgba(29,199,29,80%)
// 提取红色

（8）green()
功能：提取颜色对象的绿色值

z-index: red(rgba(29,199,150,80%)); //29
// 提取绿色

（9）blue()
功能：提取颜色对象的蓝色值

z-index: green(rgba(29,199,150,80%)); //199
// 提取蓝色

（10）alpha()
功能：提取颜色对象的透明度

z-index: alpha(rgba(29,199,150,80%)); 
//0.8

（11）luma()
功能：计算颜色对象luma的值（亮度的百分比表示法）

// 计算颜色对象luma的值（亮度的百分比表示法）
z-index:luma(rgb(100,200,30));

（12）luminance()
功能：计算没有伽玛校正的亮度值

// 计算没有伽玛校正的亮度值
z-index:luminance(rgb(100,200,30));

颜色值运算函数

（1）saturate()
功能：增加一定数值的颜色饱和度
（2）desaturate()
功能：降低一定数值的颜色饱和度
（3）lighten()
功能：增加一定数值的颜色亮度
（4）darken()
功能：降低一定数值的颜色亮度
（5）fadein()
功能：降低颜色的透明度（或增加不透明度），令其更不透明
（6）fadeout()
功能：增加颜色的透明度（或降低不透明度），令其更透明
（7）fade()
功能：给颜色（包括不透明的颜色）设定一定数值的透明度
（8）spin()
功能：任意方向旋转颜色的色相角度
（9）mix()
功能：根据比例混合两种颜色，包括计算不透明度
（10）greyscale()
功能：完全移除颜色的饱和度，与desaturate（@color，100%）函数效果相同
（11）contrast()
功能：旋转两种颜色相比较，得出哪种颜色的对比度更大就倾向于对比度最大的颜色

body{
c:hsl(90,80%,50%);
c:saturate(hsl(90,80%,50%),20%);
}
div{
width: 90px;
height: 50px;
font-size: 16px;
text-align: center;
}
.ys1{
background: hsl(90,80%,50%);
}
.ys2{
background: saturate(hsl(90,80%,50%),20%);
}
.ys3{
background: desaturate(hsl(90,80%,50%),20%);
}
.ys4{
background: lighten(hsl(90,80%,50%),20%);
}
.ys5{
background: darken(hsl(90,80%,50%),20%);
}
.ys66{
background:hsla(90,80%,50%,50%);
}
.ys6{
background: fadein(hsla(90,80%,50%,50%),50%);
}
.ys7{
background: fadeout(hsla(90,80%,50%,50%),40%);
}
.ys8{
background: hsl(90,80%,50%);
}
.ys9{
background: fade(hsl(90,80%,50%),40%);
}
.ys10{
background: hsl(10,90%,50%);
}
.ys11{
background: spin(hsl(0,90%,50%),360);
}
 
.ys12{
background: rgba(100,50,20,0.5);
}
.ys13{
background: rgba(0,150,120,0.2);
}
.ys14{
background: mix(rgba(100,50,20,0.5),rgba(0,150,120,0.2));
}
.ys15{
background: hsl(90,100%,50%);
}
.ys16{
background:contrast(hsl(90,100%,50%),#000000,#ffffff,100%)
}

颜色值混合函数

（1）multiply()
功能：分别将两种颜色的红绿蓝三种值做乘法运算，然后再除以255，输出结果更深的颜色（对应ps中的“变暗/正片叠底”）
（2）screen()
功能：与multiply函数效果相反，输出结果更亮的颜色。（对应ps中“变亮/滤色”）
（3）overlay()
功能：结合multiply与screen两个函数的效果，令浅的颜色更浅，深的颜色更深（对应ps中的叠加），输出结果由第一个颜色参数决定。
（4）softlight()
功能：与overlay函数效果相似，只是当纯黑色或纯白色作为参数时输出结果不会是纯黑色或纯白色（对应ps中的“柔光”）
（5）hardlight()
功能：与overlay函数效果相似，不过由第二个颜色参数决定输出颜色的亮度或黑度，而不是第一个颜色参数决定（对应ps中“强光/亮光/线性光/点光”）
（6）difference()
功能：从第一个颜色值中减去第二个（分别计算RGB三种颜色值），输出结果更深的颜色（对应ps中“差值/排除”）
（7）exclusion()
功能：效果与difference函数效果相似，只是输出结果差别更小（对应ps中“差值/排除”）
（8）average()
功能：分别对RGB三个颜色值取平均值，然后输出结果。
（9）negation()
功能：与difference函数效果相反，输出结果是更亮的颜色。（效果相反不代表做加法运算）

<div class="ys1">ff6600</div>
<div class="ys2">000000</div>
<div class="ys3">000000</div>
<div class="ys4">ff6600</div>
<div class="ys5">333333</div>
<div class="ys6">331400</div>
<div class="ys7">ff6600</div>
<div class="ys8">ffffff</div>
<div class="ys9">ff6600</div>
body{
c:hsl(90,80%,50%);
c:saturate(hsl(90,80%,50%),20%);
}
div{
width: 90px;
height: 50px;
line-height: 50px;
color: #fff;
font-size: 16px;
text-align: center;
}
.ys1{
background:#ff6600 ;
}
.ys2{
background: #000000;
}
.ys3{
background: multiply(#ff6600,#000000);
}
.ys4{
background:#ff6600 ;
}
.ys5{
background: #333;
}
.ys6{
background: multiply(#ff6600,#333);
}
.ys7{
background:#ff6600 ;
}
.ys8{
background: #ffffff;
}
.ys9{
background: multiply(#ff6600,#fff);
}
 
.ys1{
background:#ff6600 ;
}
.ys2{
background: #000000;
}
.ys3{
background: screen(#ff6600,#000000);
}
.ys4{
background:#ff6600 ;
}
.ys5{
background: #333;
}
.ys6{
background: screen(#ff6600,#333);
}
.ys7{
background:#ff6600 ;
}
.ys8{
background: #ffffff;
}
.ys9{
background: screen(#ff6600,#fff);
}
 
.ys1{
background:#ff6600 ;
}
.ys2{
background: #000000;
}
.ys3{
background: overlay(#ff6600,#000000);
}
.ys4{
background:#ff6600 ;
}
.ys5{
background: #333;
}
.ys6{
background: overlay(#ff6600,#333);
}
.ys7{
background:#ff6600 ;
}
.ys8{
background: #ffffff;
}
.ys9{
background: overlay(#ff6600,#fff);
}
 
.ys1{
background:#ff6600 ;
}
.ys2{
background: #000000;
}
.ys3{
background: softlight(#ff6600,#000000);
}
.ys4{
background:#ff6600 ;
}
.ys5{
background: #333;
}
.ys6{
background: softlight(#ff6600,#333);
}
.ys7{
background:#ff6600 ;
}
.ys8{
background: #ffffff;
}
.ys9{
background: softlight(#ff6600,#fff);
}
 
 
.ys1{
background:#ff6600 ;
}
.ys2{
background: #000000;
}
.ys3{
background: hardlight(#ff6600,#000000);
}
.ys4{
background:#ff6600 ;
}
.ys5{
background: #333;
}
.ys6{
background: hardlight(#ff6600,#333);
}
.ys7{
background:#ff6600 ;
}
.ys8{
background: #ffffff;
}
.ys9{
background: hardlight(#ff6600,#fff);
}
 
.ys1{
background:#ff6600 ;
}
.ys2{
background: #000000;
}
.ys3{
background: difference(#ff6600,#000000);
}
.ys4{
background:#ff6600 ;
}
.ys5{
background: #333;
}
.ys6{
background: difference(#ff6600,#333);
}
.ys7{
background:#ff6600 ;
}
.ys8{
background: #ffffff;
}
.ys9{
background: difference(#ff6600,#fff);
}
 
.ys1{
background:#ff6600 ;
}
.ys2{
background: #000000;
}
.ys3{
background: exclusion(#ff6600,#000000);
}
.ys4{
background:#ff6600 ;
}
.ys5{
background: #333;
}
.ys6{
background: exclusion(#ff6600,#333);
}
.ys7{
background:#ff6600 ;
}
.ys8{
background: #ffffff;
}
.ys9{
background: exclusion(#ff6600,#fff);
}
 
.ys1{
background:#ff6600 ;
}
.ys2{
background: #000000;
}
.ys3{
background: average(#ff6600,#000000);
}
.ys4{
background:#ff6600 ;
}
.ys5{
background: #333;
}
.ys6{
background: average(#ff6600,#333);
}
.ys7{
background:#ff6600 ;
}
.ys8{
background: #ffffff;
}
.ys9{
background: average(#ff6600,#fff);
}
 
.ys1{
background:#ff6600 ;
}
.ys2{
background: #000000;
}
.ys3{
background: negation(#ff6600,#000000);
}
.ys4{
background:#ff6600 ;
}
.ys5{
background: #333;
}
.ys6{
background: negation(#ff6600,#333);
}
.ys7{
background:#ff6600 ;
}
.ys8{
background: #ffffff;
}
.ys9{
background: negation(#ff6600,#fff);
}