由于less官方没有给出杂项函数的中文详解,所以整理一下分享出来
color
解析颜色,将代表颜色的字符串转换为颜色值.
参数:
-
string
: 代表颜色值的字符串。
返回值:color
案例:color("#aaa");
输出:#aaa
convert
将数字从一种单位转换到另一种单位。
第一个参数为带单位的数值,第二个参数为单位。如果两个参数的单位是兼容的,则数字的单位被转换。如果两个参数的单位不兼容,则原样返回第一个参数。
兼容的单位是:
- 长度:
m
,cm
,mm
,in
,pt
andpc
, - 时间:
s
andms
, - 角度:
rad
,deg
,grad
andturn
.
参数: -
number
: 带单位浮点数。 -
identifier
,string
orescaped value
: units
返回值:number
案例:
convert(9s, "ms")
convert(14cm, mm)
convert(8, mm) // incompatible unit types
输出:
9000ms
140mm
8
data-uri
将资源内联进样式表,如果开启了 ieCompat 选项并且资源太大,或者此函数的运行环境为浏览器,则会回退到直接使用
url()
。如果没有指定 MIME,则 node 将使用 mime 包来决定正确的 mime 类型。
参数:
-
mimetype
: (可选) MIME 字符串。 -
url
: 需要内嵌的文件的 URL 。
案例:data-uri('../data/image.jpg');
输出:url('data:image/jpeg;base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg==');
浏览器端输出:url('../data/image.jpg');
案例:data-uri('image/jpeg;base64', '../data/image.jpg');
输出:url('data:image/jpeg;base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg==');
unit
删除或更换单位。
参数:
-
dimension
: 带单位或不带单位的数字。 -
unit
: (可选) 目标单位,如果省略此参数,则删除单位。
案例:unit(5, px)
输出:5px
案例:unit(5em)
输出:5
escape
对字符串中的特殊字符做 URL-encoding 编码
- 这些字符不会被编码:
,
,/
,?
,@
,&
,+
,'
,~
,!
and$
。 - 被编码的字符是:
\<space\>
,#
,^
,(
,)
,{
,}
,|
,:
,>
,<
,;
,]
,[
and=
。
参数:string
: 需要转义的字符串。
返回值:转义后不带引号的string
字符串。
案例:
escape('a=1')
输出:
a%3D1
注意:如果参数不是字符串的话,函数行为是不可预知的。目前传入颜色值的话会返回 undefined
,其它的值会原样返回。写代码时不应该依赖这个特性,而且这个特性在未来有可能改变。
e
用于对 CSS 的转义,已经由
~"value"
语法代替。
它接受一个字符串作为参数,并原样返回内容,不含引号。它可用于输出一些不合法的 CSS 语法,或者是使用 LESS 不能识别的属性。
参数:string
- 需要转义的字符串。
返回值:string
- 转义后的字符串,不含引号
案例:
filter: e("ms:alwaysHasItsOwnSyntax.For.Stuff()");
输出:
filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
注意:也接受经 ~""
转义的值或者是数字作为参数。任何其它的值将产生错误。
% 格式化
此函数
%(string, arguments ...)
用于格式化字符串。
第一个参数是一个包含占位符的字符串。占位符以百分号 %
开头,后面跟着字母 s
、S
、d
、D
、a
或 A
。后续的参数用于替换这些占位符。如果你需要输出百分号,可以多用一个百分号来转义 %%
。
使用大写的占位符可以将特殊字符按照 UTF-8 编码进行转义。 此函数将会对所有的特殊字符进行转义,除了 ()'~!
。空格会被转义为 %20
。小写的占位符将原样输出特殊字符,不进行转义。
占位符说明:
-
d
,D
,a
,A
- 以被任意类型的参数替换 (颜色、数字、转义后的字符串、表达式等)。如果将它们和字符串一起使用,则整个字符串都会被使用,包括引号。然而,引号将会按原样放在字符串中,不会用 "/" 或类似的方式转义。 -
s
,S
- 可以被除了颜色的之外的任何类型参数替换。如果你将它们和字符串一起使用,则只有字符串的值会被使用,引号会被忽略。
参数:
-
string
: 有占位符的格式化字符串。 -
anything
* : 用于替换占位符的值。
返回值: 格式化后的 字符串(string)
.
案例:
format-a-d: %("repetitions: %a file: %d", 1 + 2, "directory/file.less");
format-a-d-upper: %('repetitions: %A file: %D', 1 + 2, "directory/file.less");
format-s: %("repetitions: %s file: %s", 1 + 2, "directory/file.less");
format-s-upper: %('repetitions: %S file: %S', 1 + 2, "directory/file.less");
输出:
format-a-d: "repetitions: 3 file: "directory/file.less"";
format-a-d-upper: "repetitions: 3 file: %22directory%2Ffile.less%22";
format-s: "repetitions: 3 file: directory/file.less";
format-s-upper: "repetitions: 3 file: directory%2Ffile.less";
replace
用一个字符串替换一段文本。
参数:
-
string
: 用于搜索、替换操作的字符串。 -
pattern
: 用于搜索匹配的字符串或正则表达式。 -
replacement
: 用于替换匹配项的字符串。 -
flags
: (可选) 正则表达式参数。
返回值: 被替换之后的字符串。
案例:
replace("Hello, Mars?", "Mars\?", "Earth!");
replace("One + one = 4", "one", "2", "gi");
replace('This is a string.', "(string)\.$", "new $1.");
replace(~"bar-1", '1', '2');
输出:
"Hello, Earth!";
"2 + 2 = 4";
'This is a new string.';
bar-2;
列表函数
length
返回列表中元素的个数。
参数:
-
list
- 由逗号或空格分隔的元素列表。
返回值:一个代表元素个数的数字。
案例: length(1px solid #0080ff);
输出:3
案例:
@list: "banana", "tomato", "potato", "peach";
n: length(@list);
输出:
n: 4;
extract
返回列表中指定位置的元素。
参数:
-
list
- 逗号或空格分隔的元素列表。 -
index
- 指定列表中元素位置的数字。
返回值:列表中指定位置的元素。
案例: extract(8px dotted red, 2);
输出: dotted
案例:
@list: apple, pear, coconut, orange;
value: extract(@list, 3);
输出:
value: coconut;
数学函数
ceil
向上取整。
参数: number
- 浮点数。
返回值: 整数(integer)
案例: ceil(2.4)
输出: 3
floor
向下取整。
参数: number
- 浮点数
返回值: 整数(integer)
案例: floor(2.6)
输出: 2
percentage
将浮点数转换为百分比字符串。
参数: number
- 浮点数。
返回值: 字符串(string)
案例: percentage(0.5)
输出: 50%
round
四舍五入取整。
参数:
-
number
: 浮点数 -
decimalPlaces
: 可选:四舍五入取整的小数点位置。默认值为0。
返回值: 数字(number)
案例: round(1.67)
输出: 2
案例: round(1.67, 1)
输出: 1.7
sqrt
计算一个数的平方根,并原样保持单位。
参数: number
- 浮点数
返回值: 数字(number)
案例:
sqrt(25cm)
输出:
5cm
案例:
sqrt(18.6%)
输出:
4.312771730569565%;
abs
计算数字的绝对值,并原样保持单位。
参数: number
- 浮点数。
返回值: 数字(number)
Example #1: abs(25cm)
输出: 25cm
Example #2: abs(-18.6%)
输出: 18.6%;
sin
正弦函数。
处理时会将没有单位的数字认为是弧度值。
参数: number
- 浮点数。
返回值: 数字(number)
案例:
sin(1); // sine of 1 radian
sin(1deg); // sine of 1 degree
sin(1grad); // sine of 1 gradian
输出:
0.8414709848078965; // sine of 1 radian
0.01745240643728351; // sine of 1 degree
0.015707317311820675; // sine of 1 gradian
asin
反正弦函数。返回以弧度为单位的角度,区间在 -PI/2 到 PI/2之间。
返回以弧度为单位的角度,区间在 -π/2
和 π/2
之间。
参数: number
- 取值范围为 [-1, 1]
之间的浮点数。
返回值: 数字(number)
案例:
asin(-0.8414709848078965)
asin(0)
asin(2)
输出:
-1rad
0rad
NaNrad
cos
余弦函数。
处理时会将没有单位的数字认为是弧度值。
参数: number
- 浮点数。
返回值: 数字(number)
案例:
cos(1) // cosine of 1 radian
cos(1deg) // cosine of 1 degree
cos(1grad) // cosine of 1 gradian
输出:
0.5403023058681398 // cosine of 1 radian
0.9998476951563913 // cosine of 1 degree
0.9998766324816606 // cosine of 1 gradian
acos
反余弦函数。,区间在 0 到 PI之间。
返回以弧度为单位的角度,区间在 0 到 π 之间。
参数: number
- 取值范围为 [-1, 1] 之间的浮点数。
返回值: 数字(number)
案例:
acos(0.5403023058681398)
acos(1)
acos(2)
输出:
1rad
0rad
NaNrad
tan
正切函数。
处理时会将没有单位的数字认为是弧度值。
参数: number
- 浮点数。
返回值: 数字(number)
案例:
tan(1) // tangent of 1 radian
tan(1deg) // tangent of 1 degree
tan(1grad) // tangent of 1 gradian
输出:
1.5574077246549023 // tangent of 1 radian
0.017455064928217585 // tangent of 1 degree
0.015709255323664916 // tangent of 1 gradian
atan
反正切函数。
返回以弧度为单位的角度,区间在 -π/2
到 π/2
之间。
参数: number
- 浮点数。
返回值: 数字(number)
案例:
atan(-1.5574077246549023)
atan(0)
round(atan(22), 6) // arctangent of 22 rounded to 6 decimal places
输出:
-1rad
0rad
1.525373rad;
pi
返回圆周率 π (pi);
参数: none
返回值: number
案例:
pi()
输出:
3.141592653589793
pow
设第一个参数为A,第二个参数为B,返回A的B次方。
返回值与第一个参数有相同的单位,第二个参数的单位被忽略。
参数:
-
number
: base -浮点数。 -
number
: exponent - 浮点数。
返回值: 数字(number)
案例:
pow(0cm, 0px)
pow(25, -2)
pow(25, 0.5)
pow(-25, 0.5)
pow(-25%, -0.5)
输出:
1cm
0.0016
5
NaN
NaN%
mod
返回第一个参数对第二参数取余的结果。
返回值与第一个参数单位相同,第二个参数单位被忽略。这个函数也可以处理负数和浮点数。
参数:
-
number
: 浮点数。 -
number
: 浮点数。
返回值: 数字(number)
案例:
mod(0cm, 0px)
mod(11cm, 6px);
mod(-26%, -5);
输出:
NaNcm;
5cm
-1%;
min
返回一系列值中最小的那个。
参数: value1, ..., valueN
- 一个或多个参与比较的值。
返回值: 最小值。
案例: min(5, 10);
输出: 5
案例: min(3px, 42px, 1px, 16px);
输出: 1px
max
返回一系列值中最大的那个。
参数: value1, ..., valueN
- 一个或多个参与比较的值。
返回值: 最大值。
案例: max(5, 10);
输出: 10
案例: max(3%, 42%, 1%, 16%);
输出: 42%
类型函数
isnumber
如果待验证的值为数字则返回
true
,否则返回false
。
参数:value
- 待验证的值或变量。
返回值:如果待验证的值为数字则返回 true
,否则返回 false
。
案例:
isnumber(#ff0); // false
isnumber(blue); // false
isnumber("string"); // false
isnumber(1234); // true
isnumber(56px); // true
isnumber(7.8%); // true
isnumber(keyword); // false
isnumber(url(...)); // false
isstring
如果待验证的值是字符串则返回
true
,否则返回false
。
参数:value
- 待验证的值或变量。
返回值:如果是字符串则返回 true
,否则返回 false
。
案例:
isstring(#ff0); // false
isstring(blue); // false
isstring("string"); // true
isstring(1234); // false
isstring(56px); // false
isstring(7.8%); // false
isstring(keyword); // false
isstring(url(...)); // false
iscolor
如果待验证的值为颜色则返回
true
,否则返回false
。
参数:value
- 待验证的值或变量。
返回值:如果待验证的值为颜色则返回 true
,否则返回 false
。
案例:
iscolor(#ff0); // true
iscolor(blue); // true
iscolor("string"); // false
iscolor(1234); // false
iscolor(56px); // false
iscolor(7.8%); // false
iscolor(keyword); // false
iscolor(url(...)); // false
iskeyword
如果待验证的值为关键字则返回
true
,否则返回false
。
参数: value
- 待验证的值或变量。
返回值:如果待验证的值为关键字则返回 true
,否则返回 false
。
案例:
iskeyword(#ff0); // false
iskeyword(blue); // false
iskeyword("string"); // false
iskeyword(1234); // false
iskeyword(56px); // false
iskeyword(7.8%); // false
iskeyword(keyword); // true
iskeyword(url(...)); // false
isurl
如果待验证的值为 url 则返回
true
,否则返回false
。
参数: value
- 待验证的值或变量。
返回值:如果待验证的值为 url 则返回 true
,否则返回 false
。
案例:
isurl(#ff0); // false
isurl(blue); // false
isurl("string"); // false
isurl(1234); // false
isurl(56px); // false
isurl(7.8%); // false
isurl(keyword); // false
isurl(url(...)); // true
ispixel
如果待验证的值为像素数则返回
true
,否则返回false
。
参数: value
- 待验证的值或变量。
返回值:如果待验证的值为像素数则返回 true
,否则返回 false
。
案例:
ispixel(#ff0); // false
ispixel(blue); // false
ispixel("string"); // false
ispixel(1234); // false
ispixel(56px); // true
ispixel(7.8%); // false
ispixel(keyword); // false
ispixel(url(...)); // false
isem
如果待验证的值的单位是 em 则返回
true
,否则返回false
。
参数: value
- 待验证的值或变量。
返回值:如果待验证的值的单位是 em 则返回 true
,否则返回 false
。
案例:
isem(#ff0); // false
isem(blue); // false
isem("string"); // false
isem(1234); // false
isem(56px); // false
isem(7.8em); // true
isem(keyword); // false
isem(url(...)); // false
ispercentage
如果待验证的值为百分比则返回
true
,否则返回false
。
参数: value
- 待验证的值或变量。
返回值:如果待验证的值为百分比则返回 true
,否则返回 false
。
案例:
ispercentage(#ff0); // false
ispercentage(blue); // false
ispercentage("string"); // false
ispercentage(1234); // false
ispercentage(56px); // false
ispercentage(7.8%); // true
ispercentage(keyword); // false
ispercentage(url(...)); // false
isunit
如果待验证的值为指定单位的数字则返回
true
,否则返回false
。
参数:
-
value
- 待验证的值或变量。 -
unit
- 单位标示符 (可加引号) 。
返回值:如果待验证的值为指定单位的数字则返回 true
,否则返回 false
。
案例:
isunit(11px, px); // true
isunit(2.2%, px); // false
isunit(33px, rem); // false
isunit(4rem, rem); // true
isunit(56px, "%"); // false
isunit(7.8%, '%'); // true
isunit(1234, em); // false
isunit(#ff0, pt); // false
isunit("mm", mm); // false
颜色定义函数
rgb
通过十进制红色、绿色、蓝色三种值 (RGB) 创建不透明的颜色对象。
在 HTML/CSS 中也会用文本颜色值 (literal color values) 定义颜色值,例如 #ff0000
。
参数:
-
red
: 0-255 的整数或 0-100% 的百分比数。 -
green
: 0-255 的整数或 0-100% 的百分比数。 -
blue
: 0-255 的整数或 0-100% 的百分比数。
返回值: color
案例: rgb(90, 129, 32)
输出: #5a8120
rgba
通过十进制红色、绿色、蓝色,以及 alpha 四种值 (RGBA) 创建带alpha透明的颜色对象。
参数:
-
red
: 0-255 的整数或 0-100% 的百分比数。 -
green
: 0-255 的整数或 0-100% 的百分比数。 -
blue
: 0-255 的整数或 0-100% 的百分比数。 -
alpha
: 0-1 的整数或 0-100% 的百分比数。
返回值: color
案例: rgba(90, 129, 32, 0.5)
输出: rgba(90, 129, 32, 0.5)
argb
创建格式为
#AARRGGBB
的十六进制颜色值 (注意不是#RRGGBBAA
!)。
这种格式被用于 IE 、.NET 和 Android 的开发中。
参数: color
, 颜色对象。
返回值: string
案例: argb(rgba(90, 23, 148, 0.5));
输出: #805a1794
hsl
通过色相 (hue),饱和度 (saturation),亮度 (lightness) 三种值 (HSL) 创建不透明的颜色对象。
参数:
-
hue
: 0-360 的整数,用于表示度数。 -
saturation
: 0-100% 的百分比数或 0-1 的整数。 -
lightness
: 0-100% 的百分比数或 0-1 的整数。
返回值: color
案例: hsl(90, 100%, 50%)
输出: #80ff00
当你想基于一种颜色的通道来创建另一种颜色时很方便,例如: @new: hsl(hue(@old), 45%, 90%);
@new
将拥有 @old
的 hue,以及它自身的饱和度与亮度。
hsla
通过色相 (hue),饱和度 (saturation),亮度 (lightness),以及 alpha 四种值 (HSLA) 创建透明的颜色对象。
参数:
-
hue
: 0-360 的整数,用于表示度数。 -
saturation
: 0-100% 的百分比数或 0-1 的整数。 -
lightness
: 0-100% 的百分比数或 0-1 的整数。 -
alpha
: 0-100% 的百分比数或 0-1 的整数。
返回值: color
案例: hsl(90, 100%, 50%, 0.5)
输出: rgba(128, 255, 0, 0.5)
hsv
通过色相 (hue)、饱和度 (saturation)、色调 (value) 三种值 (HSV) 创建不透明的颜色对象。
注意,与 hsl
不同,这是另一种在 Photoshop 中可用的色彩空间。
参数:
-
hue
: 0-360 的整数,用于表示度数。 -
saturation
: 0-100% 的百分比数或 0-1 的整数。 -
value
: 0-100% 的百分比数或 0-1 的整数。
返回值: color
案例: hsv(90, 100%, 50%)
输出: #408000
hsva
通过色相 (hue),饱和度 (saturation),色调 (value),以及 alpha 四种值 (HSVA) 创建透明的颜色对象。
注意,与 hsla
不同,这是另一种在 Photoshop 中可用的色彩空间。
参数:
-
hue
: 0-360 的整数,用于表示度数。 -
saturation
: 0-100% 的百分比数或 0-1 的整数。 -
value
: 0-100% 的百分比数或 0-1 的整数。 -
alpha
: 0-100% 的百分比数或 0-1 的整数。
返回值: color
案例: hsva(90, 100%, 50%, 0.5)
输出: rgba(64, 128, 0, 0.5)
颜色通道函数
hue
从颜色对象的 HSL 颜色空间中提取色色调值。
参数: color
- 颜色对象。
返回值: 整数(integer)
0-360
案例: hue(hsl(90, 100%, 50%))
输出: 90
saturation
从颜色对象的 HSL 色彩空间中提取饱和度值。
参数: color
- 颜色对象。
返回值: 百分比(percentage)
0-100
案例: saturation(hsl(90, 100%, 50%))
输出: 100%
lightness
从颜色对象的 HSL 色彩空间中提取亮度值。
参数: color
- 颜色对象。
返回值: 百分比(percentage)
0-100
案例: lightness(hsl(90, 100%, 50%))
输出: 50%
hsvhue
在颜色对象的 HSV 色彩空间中提取色相值。
参数: color
- 颜色对象。
返回值: 整数(integer)
0-360
案例: hsvhue(hsv(90, 100%, 50%))
输出: 90
hsvsaturation
在颜色对象的 HSV 色彩空间提取饱和度值。
参数: color
- 颜色对象。
返回值: 百分比(percentage)
0-100
案例: hsvsaturation(hsv(90, 100%, 50%))
输出: 100%
hsvvalue
Extracts the value channel of a color object in the HSV color space.
参数: color
- 颜色对象。
返回值: 百分比(percentage)
0-100
案例: hsvvalue(hsv(90, 100%, 50%))
输出: 50%
red
从颜色对象中提取红色通道值。
参数: color
- 颜色对象。
返回值: 整数(integer)
0-255
案例: red(rgb(10, 20, 30))
输出: 10
green
从颜色对象中提取绿色通道值。
参数: color
- 颜色对象。
返回值: 整数(integer)
0-255
案例: green(rgb(10, 20, 30))
输出: 20
blue
从颜色对象中提取蓝色通道值。
参数: color
- 颜色对象。
返回值: 整数(integer)
0-255
案例: blue(rgb(10, 20, 30))
输出: 30
alpha
从颜色对象中提取 alpha 通道值。
参数: color
- 颜色对象。
返回值: 浮点数(float)
0-1
案例: alpha(rgba(10, 20, 30, 0.5))
输出: 0.5
luma
计算颜色对象的 luma (perceptual brightness) 值(亮度的百分比表示法)。
Uses SMPTE C / Rec. 709 coefficients, as recommended in WCAG 2.0. This calculation is also used in the contrast function.
参数: color
- a颜色对象。
返回值: 百分比(percentage)
0-100%
案例: luma(rgb(100, 200, 30))
输出: 65%