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 ...) 用于格式化字符串。

第一个参数是一个包含占位符的字符串。占位符以百分号 % 开头,后面跟着字母 sSdDaA。后续的参数用于替换这些占位符。如果你需要输出百分号,可以多用一个百分号来转义 %%

使用大写的占位符可以将特殊字符按照 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 将拥有 @oldhue,以及它自身的饱和度与亮度。

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 常用函数整理)