Less 常用函数整理

由于less官方没有给出杂项函数的中文详解，所以整理一下分享出来

color

解析颜色，将代表颜色的字符串转换为颜色值.
参数：

string: 代表颜色值的字符串。
返回值： color
案例： color("#aaa");
输出： #aaa

convert

将数字从一种单位转换到另一种单位。
第一个参数为带单位的数值，第二个参数为单位。如果两个参数的单位是兼容的，则数字的单位被转换。如果两个参数的单位不兼容，则原样返回第一个参数。
兼容的单位是:

长度： m, cm, mm, in, pt and pc,
时间： s and ms,
角度： rad, deg, grad and turn.
参数：
number: 带单位浮点数。
identifier, string or escaped 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 $。
被编码的字符是：\, #, ^, (, ), {, }, |, :, >, <, ;, ], [ 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%

Less 常用函数整理

color

convert

data-uri

unit

escape

e

% 格式化

replace

列表函数

length

extract

数学函数

ceil

floor

percentage

round

sqrt

abs

sin

asin

cos

acos

tan

atan

pi

pow

mod

min

max

类型函数

isnumber

isstring

iscolor

iskeyword

isurl

ispixel

isem

ispercentage

isunit

颜色定义函数

rgb

rgba

argb

hsl

hsla

hsv

hsva

颜色通道函数

hue

saturation

lightness

hsvhue

hsvsaturation

hsvvalue

red

green

blue

alpha

luma

你可能感兴趣的:(Less 常用函数整理)