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

短命女 2022-06-14 04:08 210阅读 0赞

## 函数库 ##

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

# **一、其它函数** #

**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()；