LESS函数总结
- 3.1 String函数系列
- 3.1.1 escape(@string)编码
- 3.1.2 e(@string)转义
- 3.1.3 %(string,arguments...)格式化字符串
- 3.1.4 Replace替换
- 3.2 list函数系列
- 3.2.1 length函数
- 3.2.2 extract函数
- 3.3 Math函数系列
- 3.3.1 ceil
- 3.3.2 floor
- 3.3.3 percentage
- 3.3.4 round
- 3.3.5 sqrt(number)
- 3.3.6 abs(number)
- 3.3.7 pow(@base,@exponet)
- 3.3.8 mod(number1,number2)
- 3.4 Type函数系列
- 3.4.1 Isnumber
- 3.4.2 Isstring
- 3.4.3 iscolor
- 3.4.5 iskeyword
- 3.4.6 isurl
- 3.4.7 ispixel
- 3.4.8 isem
- 3.4.9 ispercentage
- 3.4.10 isunit
- 3.5 其他杂项函数
- 3.5.1 color函数
- 3.5.2 convert
- 3.5.3 data-uri
- 3.5.4 default
- 3.6 unit
- 3.6 color函数系列
- 3.6.1 rgb(@red,@green,@blue)
- 3.6.2 lightness(@color)
- 3.6.3 red(@color)
- 3.6.4 green(@color)
- 3.6.5 blue(@color)
- 3.6.6 alpha(@color)
- 3.6.7 lighten(@color,10%)
- 3.6.8 darken(@color,10%)
- 3.6.9 fadein(@color,10%)
- 3.6.10 fadeout(@color,10%)
- 3.6.11 fade(@color,10%)
- 3.7 函数运算
- 4.导入
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 |
2 | inline |
3 | less |
4 | css 它会将导入的文件视为常规CSS文件,尽管可能是文件扩展名。 |
5 | once |
6 | multiple |
7 | optional |
允许在 @import 语句中使用多个关键字,但必须使用逗号分隔关键字。
@import (less, optional) "custom.css";