学会如何使用LESS（四）----函数库

函数库

函数库包含了许多函数，这一切有以下九种：
① 其它函数；
② 字符串函数；
③ 长度相关函数；
④ 数学函数；
⑤ 类型函数；
⑥ 颜色值定义函数；
⑦ 颜色值通道提取函数；
⑧ 颜色值运算函数；
⑨ 颜色混合函数

一、其它函数

Color()函数
解析颜色，将代表颜色的字符串转换为十六进制的颜色值。

body{     background:color(“#f60”) }  

编译后的css:

body {     background:#ff6600; }

Convert()函数
将数字从一种类型转换到另一种类型。

body{     width:convert(20cm,px); }  

编译后的css:

body{     width:755.90551181px; }

Data-uri()函数
将一个资源内嵌到样式文件，如果开启了ieconmpat选项，而且资源文件的体积过大，或者是在浏览器中使用，则会使用url()进行回退。如果没有指定MIME，则Node.js会使用MIME包来决定正确的MIME。

body{ background:data-uri(‘arr.jpg’); }

Default()函数
只能边界条件使用，没有匹配到其他自定义函数（mixin）的时候返回true，否则返回false。

.x(1) {  x:11 }.x(2) { y:22 }.x(@x) when (default()) {z:@x}.div1{  .x(1)}.div2{  .x(123)}  

编译后的css:

.div1{ x:11; }.div2{ z:123;} 

Unit()函数
移除或者改变属性值的单位。

div{  width: unit(100px);  height: unit(200,px)}

编译后的css:

div {  width: 100;  height: 200px;}

二、字符串函数

escape()函数
将输入字符串的url特殊字符进行编码处理；
不转义的编码：, , / , ? , @ , & , + , ‘ , ~ . ! , $
转义的编码：# , ^ ( , ) { , } , | , ; . , : , > , < , = , [ , ]

div{     d:escape(‘123=abc’); }

编译后的css:

div {  d: 123%3Dabc;}

e()函数
css转义，用~“值”符号代替。
Css就会原文输出，也就是避免编译；

div{     filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()"; }

编译后的css:

div {  filter: ms:alwaysHasItsOwnSyntax.For.Stuff();}

%()函数
函数%(string, arguments…)格式化一个字符串。
在这里面有6个值，也就是占位符：a A d D s S，它们的含义也不同
D , d, a, A能被任何类型参数替换（颜色值，数字，转义值，表达式……），如果你在字符串中结合使用，整个字符串参数都会替换进去，包括他的引号，然后引号会被替换到字符串参数的原有位置，也许会被转义或者还是不变，取决于占位符是大写字母还是小写字母。
S , s 能被除了颜色值以外的任何类型参数替换，如果你在字符串中结合使用，只会替换程字符串参数的值。
replace()函数
用另一个字符串替换文本

div{     aaa:replace( "HELLO,maizi", "maizi", "LESS" )}

编译后的css:

div {  aaa: "HELLO,LESS";}

长度相关函数

length()函数
返回集合中的条数。

div {  length:length(1px solid #0080ff);}

编译后的css:

div {  length: 3;}

extract()函数
返回集合中指定索引的值。

@list:"banana","tomato","peach";div {  aaa:extract(@list,1)}

编译后的css:

div {  aaa: "banana";}

数学函数

1).向上取整：ceil()
2).向下取整：floor()
3).将浮点数转换为百分比：percentage()
4).取整和四舍五入：round()
5).计算一个数的平方根，原样保持单位：sqrt()
6).计算数字的绝对值，原样保持单位：abs()
7).正弦函数:sin()
8).反正弦函数:asin()
9).余弦函数：cos()
10).反余弦函数：acos()
11).正切函数：tan()
12).反正切函数：atan()
13).返回π(pi)：pi()
14).乘方运算：pow()
15).取余运算：mod()
16).最小值运算：min()
17).最大值运算：max()
这个并不是很难理解,需要自己多去练习，熟能生巧。

类型函数

类型相关函数一共有9个：
1）.如果一个值是一个数字，返回真（true），否者返回（false）：isnumber()；
2).如果一个只是一个字符串，返回真（true），否者返回（false）：isstring()；
3).如果一个值是一个颜色，返回真（true），否者返回（false）：iscolor()；
4).如果一个值是一个关键字，返回真（true），否者返回（false）：iskeyword()；
5).如果一个值是一个url地址，返回真（true），否者返回（false）：isurl()；
6).如果一个值是带像素长度单位的数字，返回真（true），否者返回（false）：ispixel()；
7).如果一个值是带em长度单位的数字，返回真（true），否者返回（false）：isem()；
8).如果一个值是带百分比单位的数字，返回真（true），否者返回（false）：ispercentage()；
9).如果一个值是带指定单位的数字，返回真（true），否者返回（false）：isunit()；

.mix(@x) when (isnumber(@x)) {  number: @x;}.mix(@x) when (isstring(@x)) {  string: @x;}.mix(@x) when (iscolor(@x)) {  color: @x;}.mix(@x) when (iskeyword(@x)) {  keyword: @x;}.mix(@x) when (ispixel(@x)) {  pixel: @x;}.mix(@x) when (isem(@x)) {  em: @x;}.mix(@x) when (isurl(@x)) {  url: @x;}.mix(@x) when (ispercentage(@x)) {  percentage: @x;}.mix(@x) when (isunit(@x,cm)) {  cm:@x;}.div{    .mix(222);    .mix("string");    .mix("#333");    .mix(ABC);    .mix(220px);    .mix(3em);    .mix(url("1.jpg"));    .mix(20%);    .mix(34cm);}

编译后的css:

.div {  number: 222;  string: "string";  string: "#333";  keyword: ABC;  number: 220px;  pixel: 220px;  number: 3em;  em: 3em;  url: url("1.jpg");  number: 20%;  percentage: 20%;  number: 34cm;  cm: 34cm;}

颜色值定义函数

1）.通过十进制红色，绿色，蓝色三种值（RGB）创建不透明的颜色对象：rgb()；
2).通过十进制红色，绿色，蓝色，以及alpha四种植（RGBA）创建带alpha透明的颜色对象：rgba()；
3).创建格式为#AARRGGBB的十六进制（hex representation）颜色（注意不是#RRGGBBAA ! ）：argb()；
4). 通过色相(hue)，饱和度（saturation），亮度（lightness）三种值创建不透明的颜色对象：hls()；
5).通过色相(hue)，饱和度（saturation），亮度（lightness），以及alpha四种值（HSLA）创建透明的颜色对象：hsla()；
6). 通过色相(hue)，饱和度（saturation），色调（value）三种值（HSV）创建不透明的颜色对象：hsv()；
7).通过色相(hue)，饱和度（saturation），色调（value），以及alpha四种值创建透明的颜色对象：hsva()；

//通过十进制红色，绿色，蓝色三种值 (RGB) 创建不透明的颜色对象。div{  background: rgb(255,0,0);  background: rgb(100%,0%,0%);}//通过十进制红色，绿色，蓝色，以及 alpha 四种值 (RGBA) 创建带alpha透明的颜色对象。div{  background: rgba(255,0,0,0.5);  background: rgba(100%,0%,0%,0.5);}//创建格式为 #AARRGGBB 的十六进制 (hex representation) 颜色 (注意不是 #RRGGBBAA ！)。div{  background: argb(rgba(255,0,0,0.5));  background: argb(rgba(100%,0%,0%,0.5));}//通过色相 (hue)，饱和度 (saturation)，亮度 (lightness) 三种值 (HSL) 创建不透明的颜色对象。div{  background: hsl(90,100%,50%);}//通过色相 (hue)，饱和度 (saturation)，亮度 (lightness)，以及 alpha 四种值 (HSLA) 创建透明的颜色对象。div{  background: hsla(90,100%,50%,0.5);}//通过色相 (hue)，饱和度 (saturation)，色调 (value) 三种值 (HSV) 创建不透明的颜色对象。div{  background: hsv(90,100%,50%);}//通过色相 (hue)，饱和度 (saturation)，色调 (value)，以及 alpha 四种值 (HSVA) 创建透明的颜色对象。div{  background: hsva(90,100%,50%,8%);}

编译后的css:

div {  background: #ff0000;}div {  background: rgba(255, 0, 0, 0.5);}div {  background: #80ff0000;}div {  background: #80ff00;}div {  background: rgba(128, 255, 0, 0.5);}div {  background: #408000;}div {  background: rgba(64, 128, 0, 0.08);}

颜色值通道提取函数

1）.从HSL色彩空间中提取颜色对象的色相值：hue()；
2). 从HSL色彩空间中提取颜色对象的饱和度值：saturation()；
3). 从HSL色彩空间中提取颜色对象的亮度值:lightness()；
4). 从HSV色彩空间中提取颜色对象的色相值：hsvhue()；
5). 从HSV色彩空间中提取颜色对象的饱和度值:hsvsaturation()；
6). 从色彩空间中提取颜色对象的色调值：hsvvalue()；
7). 提取颜色对象的红色值：red()；
8). 提取颜色对象的绿色值：gree()；
9). 提取颜色对象的蓝色值：blue()；
10). 提取颜色对象的透明值：alpha()；
11).计算颜色对象的luma的值（亮度的百分比表示方法）：lima()
12).计算没有伽玛校正的亮度值：luminance()；

颜色值运算函数

1).增加一定数值的颜色饱和度：saturate()；
2).降低一定数值的颜色饱和度：desaturate()；
3).增加一定数值的颜色亮度：lighten()；
4).降低一定数值的颜色亮度：darken()；
5).降低颜色的透明度（或增加不透明度），令其更不透明：fadein()；
6).增加颜色的透明度（或降低不透明的），令其更透明：fadeout()；
7).给颜色（包括不透明的颜色）设定一定数值的透明度：fade()；
8）.任意方向旋转颜色的色相角度（hue angle）:spin()；
9).根据比例混合两种颜色，包括计算不透明度：mix()；
10).完全移除颜色的饱和度，与desaturate(@colo,100%)函数效果相同：greyscale()；
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%)}

编译后的css:

body {  c: #80e619;  c: #80ff00;}div {  width: 90px;  height: 50px;  font-size: 16px;  text-align: center;}.ys1 {  background: #80e619;}.ys2 {  background: #80ff00;}.ys3 {  background: #80cc33;}.ys4 {  background: #b3f075;}.ys5 {  background: #4d8a0f;}.ys66 {  background: rgba(128, 230, 25, 0.5);}.ys6 {  background: #80e619;}.ys7 {  background: rgba(128, 230, 25, 0.1);}.ys8 {  background: #80e619;}.ys9 {  background: rgba(128, 230, 25, 0.4);}.ys10 {  background: #f2330d;}.ys11 {  background: #f20d0d;}.ys12 {  background: rgba(100, 50, 20, 0.5);}.ys13 {  background: rgba(0, 150, 120, 0.2);}.ys14 {  background: rgba(65, 85, 55, 0.35);}.ys15 {  background: #80ff00;}.ys16 {  background: #ffffff;}

颜色混和函数

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