LESS函数总结

3.1 String函数系列

3.1.1 escape(@string)编码

使用URL-encoding的方式编码字符串。常用于对url中出现= \ / ; ^等字符进行编码。

如果参数是字母表中26个字母，大小写均可，或者是数字，则原样返回。

@myurl: escape('a1');
#header {
  background-image: url(@myurl);
}

// 编译之后的结果为：
#header {
  background-image: url(a1);
}

但是除此之外，其他字符也不一定都会被编码

不会被编码的字符：/ ? @ & + ' ~ ! $

常见的被编码的字符串：# ^ ( ) { } | : > < ; [ ] =

@myurl: escape("a=1&b>3+1");
#header {
  background-image: url(@myurl);
}

// 编译之后的结果为：
#header {
  background-image: url(a%3D1&b%3E3+1);
}

3.1.2 e(@string)转义

用于对CSS的转义，与之前媒体查询定义变量的方式中使用~"value"类似。其接收一个字符串作为参数，并原样返回内容（不含字符串的两边的引号）。可用于输出一些不合法的CSS语法，或者是使用LESS不能识别的属性。这样使得不会报错，虽然输出样式和原来的没有区别，但是具体的内容被进行了处理。

@myurl: e("a=1&b>3+1");
#header {
  background-image: url(@myurl);
}

// 编译之后的结果
#header {
  background-image: url(a=1&b>3+1);
}

3.1.3 %(string,arguments…)格式化字符串

类似于C语言输出函数printf格式化一样，此处也可以通过占位符进行格式化。含义一致

#header {
  width: %('%dpx',300);
  height: %('%dpx',300);
  background-color: #00f;
}

// 编译之后的结果为：
#header {
  width: '300px';
  height: '300px';
  background-color: #00f;
}

需要注意的是，该函数返回格式化的字符串，带有' '，这样就会导致以上编译之后的属性值失效

解决方法：使用e(@string)函数进行转义，去除引号

#header {
  width: e(%('%dpx',300));
  height: e(%('%dpx',300));
  background-color: #00f;
}
// 编译之后的结果为：
#header {
  width: 300px;
  height: 300px;
  background-color: #00f;
}

3.1.4 Replace替换

用另一个字符串替换文本

参数：

• string: 搜索和替换用的字符串
• pattern: 一个字符串或者能搜索的正则表达式
• replacement:匹配模式成功后替换之后的字符串
• flags:（可选）全匹配还是局部匹配

#header::after {
  content: replace("Hello, Mars?", "Mars\?", "Earth!");
}

// 编译之后的结果为：
#header::after {
  content: "Hello, Earth!";
}

3.2 list函数系列

3.2.1 length函数

用于获取集合中的值的数目

参数：采用逗号/空格隔开的集合

返回：集合中值的个数

使用：

@list1: "a" "b" "c" "d";
@list2: "a","b";
div {
  width: length(@list1)px;
  height: length(@list2)px;
}

// 编译之后的结果为：
div {
  width: 4 px;
  height: 2 px;
}

3.2.2 extract函数

用于返回集合中指定位置上的值。索引从1开始

使用：

@list: 200 300 400 500;
div {
  width: extract(@list,2)px;
}

3.3 Math函数系列

3.3.1 ceil

向上取整

3.3.2 floor

向下取整

3.3.3 percentage

将小数转化为百分比的形式

@list: .2;
div {
  width: percentage(@list);
}

// 编译之后的结果为：
div {
  width: 20%;
}

3.3.4 round

四舍五入

参数：

• number：浮点数
• decimalPlaces: 可选参数，四舍五入取整的小数点位置，默认值为0

3.3.5 sqrt(number)

计算数字的平方根

3.3.6 abs(number)

求数字的绝对值

3.3.7 pow(@base,@exponet)

求@base得@exponet次方

3.3.8 mod(number1,number2)

number1对number2取余

3.4 Type函数系列

判断数据类型，也即数据值类型，虽然js是弱类型，但是数据值也有number,boolean之分得。

3.4.1 Isnumber

判断数据是否是数字

@list: .2;
@isnum: isnumber(@list);// true

3.4.2 Isstring

判断数据是否是字符串

@list: false;
@isstr:isstring(@list);// false

3.4.3 iscolor

判断数据是否是个颜色值

@list: rgba(0,0,0,.5);
@iscolor: iscolor(@list);// true

3.4.5 iskeyword

判断数据是否是一个关键字

@list: soild;
@iskeyword: iskeyword(@list);// true

3.4.6 isurl

判断数据是否是一个url地址，该地址需要放在url函数中，而不是单纯的一个字符串

@list: url("https://www.cd.com");
@list2: "https://www.cd.com";
@isurl1: isurl(@list);// true;
@isurl2: isurl(@list2);// false

3.4.7 ispixel

判断数据是否是带像素单位的数据。

@list: 200;
@list2: 200px;
@ispixel1: ispixel(@list);// false;
@ispixel2: ispixel(@list2);//true;

3.4.8 isem

判断数据是否是带em单位的数据

3.4.9 ispercentage

判断数据是否是带百分比单位的数据

3.4.10 isunit

判断数据是否是带指定单位的数据

@list: 200;
@list2: 200px;
@isunit1: isunit(@list,px) ;// false
@isunit2: isunit(@list2,px);//true

3.5 其他杂项函数

3.5.1 color函数

将代表颜色的字符串(内置颜色值：red等，以及十六进制值)转换为十六进制颜色值。rgb值还是转换为rgb值。

@color: red;
@colorborder: rgba(0,3,4,.5);
div {
  background: color(@color);
  border: 1px solid color(@colorborder);
}

// 解析之后的结果为：
div {
  background: #ff0000;
  border: 1px solid rgba(0, 3, 4, 0.5);
}

3.5.2 convert

数据兼容单位之间的转换。

兼容单位有：

长度： m cm mm in pt pc

时间： s ms

角度： rad deg grad turn

第一个参数是带单位的数值，第二个参数是要转换的单位。如果两个参数的单位是兼容的，则数字的单位被转换，如果两个参数的单位不兼容，则原样返回第一个参数。

兼容单位的相互转换

@time: 3000ms;
div {
  transition-duration: convert(@time,s);
}

// 编译之后的结果为
div {
  transition-duration: 3s;
}

不兼容单位的相互转换

@time: 3000ms;
div {
  transition-duration: convert(@time,deg);
}

// 编译之后的结果为：
div {
   transition-duration: 3000ms;
}

3.5.3 data-uri

将资源文件内嵌到样式文件中。

但是我感觉就主要是对字符串的地址进行URL转换，转换为url()函数的方式获取路径。

@time: '/images/dog.jpg';
div {
  background-image: data-uri(@time);
}

// 编译之后的结果为：
div {
  background-image: url('/images/dog.jpg');
}

3.5.4 default

边界函数，当自定义函数都不匹配的时候，该默认函数被匹配，否则匹配匹配成功的函数。

// 定义了三个自定义函数
.minx(1) {
  x: 2;
}

.minx(2) {
  x: 3;
}

.minx(@x) when(default()) {
  z:@x;
}

div {
    // 匹配成功
  .minx(1);
}

span {
    // 匹配成功
  .minx(2);
}

.my {
    // 匹配不成功 匹配默认函数
  .minx(3);
}

3.6 unit

移除或者改变属性值的单位

第一个参数是要做计算的数据，可以带单位或者不带单位，如果不带单位且第二个参数有值，则会加上，否则替换。

第二个参数是可选值，将要替换的单位。

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

// 编译之后的结果为：
div {
  width: 200%;
  height: 200px;
}

3.6 color函数系列

3.6.1 rgb(@red,@green,@blue)

将rgb颜色值转为十六进制颜色值

div {
  background-color: rgb(1,2,3);
}

//  编译之后的结果为：
div {
  background-color: #010203;
}

3.6.2 lightness(@color)

提取lightness亮度

div {
  background-color: lightness(#909090);
}

// 编译之后的结果为：
div {
  background-color: 56.47058824%;
}

3.6.3 red(@color)

提取red颜色的值

div {
  background-color: red(#909090);
}

// 编译之后的结果为：
div {
  background-color: 144;
}

3.6.4 green(@color)

提取green颜色的值

3.6.5 blue(@color)

提取blue颜色的值

3.6.6 alpha(@color)

提取透明度的值

3.6.7 lighten(@color,10%)

提高10%的@color亮度

3.6.8 darken(@color,10%)

降低10%的@color

3.6.9 fadein(@color,10%)

透明度增加10%

3.6.10 fadeout(@color,10%)

透明度减少10%

3.6.11 fade(@color,10%)

设置透明度为10%

3.7 函数运算

less中支持加减乘除运算

@width: 20px;
div {
  background-color: red(#909090);
  width: @width * 10;
}

// 编译之后的结果为：
div {
  background-color: 144;
  width: 200px;
}

4.导入

可以使用@import导入其他文件

LESS提供 @import ，允许样式表同时导入LESS和CSS样式表。

S.N.	导入选项及描述
1	reference 它使用一个LESS文件作为参考，不会输出它。
2	inline 它使您能够将CSS复制到输出而不进行处理。
3	less 它会将导入的文件视为常规LESS文件，尽管可能是文件扩展名。
4	css 它会将导入的文件视为常规CSS文件，尽管可能是文件扩展名。
5	once 它将只导入一次文件。
6	multiple 它会多次导入文件。
7	optional 即使找不到要导入的文件，它仍会继续编译。

允许在 @import 语句中使用多个关键字，但必须使用逗号分隔关键字。

@import (less, optional) "custom.css";