less函数手册(三）

Less 所内置的函数。

杂项函数

color

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

参数： string: 代表颜色值的字符串。

返回值： color

案例： color("#aaa");

输出： #aaa

convert

将数字从一种单位转换到另一种单位。

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

参见 unit 不做转换的情况下改变单位

兼容的单位是:

• 长度： 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

输出：

9000ms140mm8

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==');

default

Available only inside guard conditions and returns true only if no other mixin matches, falseotherwise.

案例：

.mixin(1)                   {x: 11}.mixin(2)                   {y: 22}.mixin(@x) when (default()) {z: @x}div {  .mixin(3);}div.special {  .mixin(1);}

输出：

div {  z: 3;}div.special {  x: 11;}

It is possible to use the value returned by default with guard operators. For example .mixin() when not(default()) {} will match only if there's at least one more mixin definition that matches.mixin() call:

.mixin(@value) when (ispixel(@value)) {width: @value}.mixin(@value) when not(default())    {padding: (@value / 5)}div-1 {  .mixin(100px);}div-2 {  /* ... */  .mixin(100%);}

输出：

div-1 {  width: 100px;  padding: 20px;}div-2 {  /* ... */}

It is allowed to make multiple default() calls in the same guard condition or in a different conditions of a mixins with the same name:

div {  .m(@x) when (default()), not(default())    {always: @x}  .m(@x) when (default()) and not(default()) {never:  @x}  .m(1); // OK}

However Less will throw a error if it detects a potential conflict between multiple mixin definitions using default():

div {  .m(@x) when (default())    {}  .m(@x) when not(default()) {}  .m(1); // Error}

In above example it is impossible to determine what value each default() call should return since they recursively depend on each other.

Advanced multiple default() usage:

.x {  .m(red)                                    {case-1: darkred}  .m(blue)                                   {case-2: darkblue}  .m(@x) when (iscolor(@x)) and (default())  {default-color: @x}  .m('foo')                                  {case-1: I am 'foo'}  .m('bar')                                  {case-2: I am 'bar'}  .m(@x) when (isstring(@x)) and (default()) {default-string: and I am the default}  &-blue  {.m(blue)}  &-green {.m(green)}  &-foo   {.m('foo')}  &-baz   {.m('baz')}}

输出：

.x-blue {  case-2: #00008b;}.x-green {  default-color: #008000;}.x-foo {  case-1: I am 'foo';}.x-baz {  default-string: and I am the default;}

The default function is available as a Less built-in function only inside guard expressions. If used outside of a mixin guard condition it is interpreted as a regular CSS value:

案例：

div {  foo: default();  bar: default(42);}

输出：

div {  foo: default();  bar: default(42);}

unit

删除或更换单位。

参数：

• dimension: 带单位或不带单位的数字。
• unit: (可选) 目标单位，如果省略此参数，则删除单位。

See convert for changing the unit without conversion.

案例： unit(5, px)

输出： 5px

案例： unit(5em)

输出： 5

Improve this section.

字符串函数

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

用一个字符串替换一段文本。

添加于 v1.7.0 版本

参数：

• 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;

Improve this section.

列表函数

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;

Improve this section.

数学函数

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 radiansin(1deg); // sine of 1 degreesin(1grad); // sine of 1 gradian

输出：

0.8414709848078965; // sine of 1 radian0.01745240643728351; // sine of 1 degree0.015707317311820675; // sine of 1 gradian

asin

反正弦函数。返回以弧度为单位的角度，区间在 -PI/2 到 PI/2之间。

返回以弧度为单位的角度，区间在 -π/2 和 π/2 之间。

参数： number - 取值范围为 [-1, 1] 之间的浮点数。

返回值： 数字（number）

案例：

asin(-0.8414709848078965)asin(0)asin(2)

输出：

-1rad0radNaNrad

cos

余弦函数。

处理时会将没有单位的数字认为是弧度值。

参数： number - 浮点数。

返回值： 数字（number）

案例：

cos(1) // cosine of 1 radiancos(1deg) // cosine of 1 degreecos(1grad) // cosine of 1 gradian

输出：

0.5403023058681398 // cosine of 1 radian0.9998476951563913 // cosine of 1 degree0.9998766324816606 // cosine of 1 gradian

acos

反余弦函数。，区间在 0 到 PI之间。

返回以弧度为单位的角度，区间在 0 到 π 之间。

参数： number - 取值范围为 [-1, 1] 之间的浮点数。

返回值： 数字（number）

案例：

acos(0.5403023058681398)acos(1)acos(2)

输出：

1rad0radNaNrad

tan

正切函数。

处理时会将没有单位的数字认为是弧度值。

参数： number - 浮点数。

返回值： 数字（number）

案例：

tan(1) // tangent of 1 radiantan(1deg) // tangent of 1 degreetan(1grad) // tangent of 1 gradian

输出：

1.5574077246549023   // tangent of 1 radian0.017455064928217585 // tangent of 1 degree0.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

输出：

-1rad0rad1.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)

输出：

1cm0.00165NaNNaN%

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%

Improve this section.

类型函数

isnumber

如果待验证的值为数字则返回 true ，否则返回 false 。

参数：value - 待验证的值或变量。

返回值：如果待验证的值为数字则返回 true ，否则返回 false 。

案例：

isnumber(#ff0);     // falseisnumber(blue);     // falseisnumber("string"); // falseisnumber(1234);     // trueisnumber(56px);     // trueisnumber(7.8%);     // trueisnumber(keyword);  // falseisnumber(url(...)); // false

isstring

如果待验证的值是字符串则返回 true ，否则返回 false 。

参数：value - 待验证的值或变量。

返回值：如果是字符串则返回 true ，否则返回 false 。

案例：

isstring(#ff0);     // falseisstring(blue);     // falseisstring("string"); // trueisstring(1234);     // falseisstring(56px);     // falseisstring(7.8%);     // falseisstring(keyword);  // falseisstring(url(...)); // false

iscolor

如果待验证的值为颜色则返回 true ，否则返回 false 。

参数：value - 待验证的值或变量。

返回值：如果待验证的值为颜色则返回 true ，否则返回 false 。

案例：

iscolor(#ff0);     // trueiscolor(blue);     // trueiscolor("string"); // falseiscolor(1234);     // falseiscolor(56px);     // falseiscolor(7.8%);     // falseiscolor(keyword);  // falseiscolor(url(...)); // false

iskeyword

如果待验证的值为关键字则返回 true ，否则返回 false 。

参数： value - 待验证的值或变量。

返回值：如果待验证的值为关键字则返回 true ，否则返回 false 。

案例：

iskeyword(#ff0);     // falseiskeyword(blue);     // falseiskeyword("string"); // falseiskeyword(1234);     // falseiskeyword(56px);     // falseiskeyword(7.8%);     // falseiskeyword(keyword);  // trueiskeyword(url(...)); // false

isurl

如果待验证的值为 url 则返回 true ，否则返回 false 。

参数： value - 待验证的值或变量。

返回值：如果待验证的值为 url 则返回 true ，否则返回 false 。

案例：

isurl(#ff0);     // falseisurl(blue);     // falseisurl("string"); // falseisurl(1234);     // falseisurl(56px);     // falseisurl(7.8%);     // falseisurl(keyword);  // falseisurl(url(...)); // true

ispixel

如果待验证的值为像素数则返回 true ，否则返回 false 。

参数： value - 待验证的值或变量。

返回值：如果待验证的值为像素数则返回 true ，否则返回 false 。

案例：

ispixel(#ff0);     // falseispixel(blue);     // falseispixel("string"); // falseispixel(1234);     // falseispixel(56px);     // trueispixel(7.8%);     // falseispixel(keyword);  // falseispixel(url(...)); // false

isem

如果待验证的值的单位是 em 则返回 true ，否则返回 false 。

参数： value - 待验证的值或变量。

返回值：如果待验证的值的单位是 em 则返回 true ，否则返回 false 。

案例：

isem(#ff0);     // falseisem(blue);     // falseisem("string"); // falseisem(1234);     // falseisem(56px);     // falseisem(7.8em);    // trueisem(keyword);  // falseisem(url(...)); // false

ispercentage

如果待验证的值为百分比则返回 true ，否则返回 false 。

参数： value - 待验证的值或变量。

返回值：如果待验证的值为百分比则返回 true ，否则返回 false 。

案例：

ispercentage(#ff0);     // falseispercentage(blue);     // falseispercentage("string"); // falseispercentage(1234);     // falseispercentage(56px);     // falseispercentage(7.8%);     // trueispercentage(keyword);  // falseispercentage(url(...)); // false

isunit

如果待验证的值为指定单位的数字则返回 true ，否则返回 false 。

参数：

• value - 待验证的值或变量。
• unit - 单位标示符 (可加引号) 。

返回值：如果待验证的值为指定单位的数字则返回 true ，否则返回 false 。

案例：

isunit(11px, px);  // trueisunit(2.2%, px);  // falseisunit(33px, rem); // falseisunit(4rem, rem); // trueisunit(56px, "%"); // falseisunit(7.8%, '%'); // trueisunit(1234, em);  // falseisunit(#ff0, pt);  // falseisunit("mm", mm);  // false

Improve this section.

颜色定义函数

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)

Improve this section.

颜色通道函数

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%

Improve this section.

颜色操作函数

Color operations generally take parameters in the same units as the values they are changing, and percentages are handled as absolutes, so increasing a 10% value by 10% results in 20%, not 11%, and values are clamped to their allowed ranges; they do not wrap around. Where return values are shown, we've used formats that make it clear what each function has done, in addition to the hex versions that you will usually be be working with.

saturate

Increase the saturation of a color in the HSL color space by an absolute amount.

参数：

• color: 颜色对象。
• amount: 百分比 0-100%。

返回值： color

案例： saturate(hsl(90, 80%, 50%), 20%)

输出： #80ff00 // hsl(90, 100%, 50%)

➜

desaturate

Decrease the saturation of a color in the HSL color space by an absolute amount.

参数：

• color: 颜色对象。
• amount: 百分比 0-100%。

返回值： color

案例： desaturate(hsl(90, 80%, 50%), 20%)

输出： #80cc33 // hsl(90, 60%, 50%)

➜

lighten

Increase the lightness of a color in the HSL color space by an absolute amount.

参数：

• color: 颜色对象。
• amount: 百分比 0-100%。

返回值： color

案例： lighten(hsl(90, 80%, 50%), 20%)

输出： #b3f075 // hsl(90, 80%, 70%)

➜

darken

Decrease the lightness of a color in the HSL color space by an absolute amount.

参数：

• color: 颜色对象。
• amount: 百分比 0-100%。

返回值： color

案例： darken(hsl(90, 80%, 50%), 20%)

输出： #4d8a0f // hsl(90, 80%, 30%)

➜

fadein

Decrease the transparency (or increase the opacity) of a color, making it more opaque.

Has no effect on opaque colors. To fade in the other direction use fadeout.

参数：

• color: 颜色对象。
• amount: 百分比 0-100%。

返回值： color

案例： fadein(hsla(90, 90%, 50%, 0.5), 10%)

输出： rgba(128, 242, 13, 0.6) // hsla(90, 90%, 50%, 0.6)

fadeout

Increase the transparency (or decrease the opacity) of a color, making it less opaque. To fade in the other direction use fadein.

参数：

• color: 颜色对象。
• amount: 百分比 0-100%。

返回值： color

案例： fadeout(hsla(90, 90%, 50%, 0.5), 10%)

输出： rgba(128, 242, 13, 0.4) // hsla(90, 90%, 50%, 0.6)

fade

Set the absolute transparency of a color. Can be applied to colors whether they already have an opacity value or not.

参数：

• color: 颜色对象。
• amount: 百分比 0-100%。

返回值： color

案例： fade(hsl(90, 90%, 50%), 10%)

输出： rgba(128, 242, 13, 0.1) //hsla(90, 90%, 50%, 0.1)

spin

Rotate the hue angle of a color in either direction.

While the angle range is 0-360, it applies a mod 360 operation, so you can pass in much larger (or negative) values and they will wrap around e.g. angles of 360 and 720 will produce the same result. Note that colors are passed through an RGB conversion, which doesn't retain hue value for greys (because hue has no meaning when there is no saturation), so make sure you apply functions in a way that preserves hue, for example don't do this:

@c: saturate(spin(#aaaaaa, 10), 10%);

Do this instead:

@c: spin(saturate(#aaaaaa, 10%), 10);

Colors are always returned as RGB values, so applying spin to a grey value will do nothing.

参数：

• color: 颜色对象。
• angle: A number of degrees to rotate (+ or -).

返回值： color

案例：

spin(hsl(10, 90%, 50%), 30)spin(hsl(10, 90%, 50%), -30)

输出：

#f2a60d // hsl(40, 90%, 50%)#f20d59 // hsl(340, 90%, 50%)

➜

➜

mix

Mix two colors together in variable proportion. Opacity is included in the calculations.

参数：

• color1: 颜色对象。
• color2: 颜色对象。
• weight: Optional, a percentage balance point between the two colors, defaults to 50%.

返回值： color

案例：

mix(#ff0000, #0000ff, 50%)mix(rgba(100,0,0,1.0), rgba(0,100,0,0.5), 50%)

输出：

#800080rgba(75, 25, 0, 0.75)

+➜

greyscale

Remove all saturation from a color in the HSL color space; the same as callingdesaturate(@color, 100%).

Because the saturation is not affected by hue, the resulting color mapping may be somewhat dull or muddy; luma may provide a better result as it extracts perceptual rather than linear brightness, for example greyscale('#0000ff') will return the same value asgreyscale('#00ff00'), though they appear quite different in brightness to the human eye.

参数： color: 颜色对象。

返回值： color

案例： greyscale(hsl(90, 90%, 50%))

输出： #808080 // hsl(90, 0%, 50%)

➜

Notice that the generated grey looks darker than the original green, even though its lightness value is the same.

Compare with using luma (usage is different because luma returns a single value, not a color):

@c: luma(hsl(90, 90%, 50%));color: rgb(@c, @c, @c);

输出： #cacaca

➜

This time the grey's lightness looks about the same as the green, though its value is actually higher.

contrast

Choose which of two colors provides the greatest contrast with another.

This is useful for ensuring that a color is readable against a background, which is also useful for accessibility compliance. This function works the same way as the contrast function in Compass for SASS. In accordance with WCAG 2.0, colors are compared using theirluma value, not their lightness.

The light and dark parameters can be supplied in either order - the function will calculate their luma values and assign light and dark automatically, which means you can't use this function to select the least contrasting color by reversing the order.

参数：

• color: A color object to compare against.
• dark: optional - A designated dark color (defaults to black).
• light: optional - A designated light color (defaults to white).
• threshold: optional - A percentage 0-100% specifying where the transition from "dark" to "light" is (defaults to 43%, matching SASS). This is used to bias the contrast one way or another, for example to allow you to decide whether a 50% grey background should result in black or white text. You would generally set this lower for 'lighter' palettes, higher for 'darker' ones..

返回值： color

案例：

contrast(#aaaaaa)contrast(#222222, #101010)contrast(#222222, #101010, #dddddd)contrast(hsl(90, 100%, 50%), #000000, #ffffff, 40%);contrast(hsl(90, 100%, 50%), #000000, #ffffff, 60%);

输出：

#000000 // black#ffffff // white#dddddd#000000 // black#ffffff // white

These examples use the calculated colors for background and foreground; you can see that you never end up with white-on-white, nor black-on-black, though it's possible to use the threshold to permit lower-contrast outcomes, as in the last 案例：

Improve this section.

颜色混合函数

这些操作和图片编辑器（例如 Photoshop、Fireworks 或 GIMP）中的混合模式很类似（虽然不是完全一致），因此，你可以通过这些函数让 CSS 中的颜色与图片中的颜色相匹配。

multiply

分别将两种颜色的红绿蓝 (RGB) 三种值做乘法运算，然后再除以 255，输出结果是更深的颜色。（译注：对应Photoshop中的“变暗/正片叠底”。）

参数：

• color1: 颜色对象。
• color2: 颜色对象。

返回值： 颜色（color）

案例:

multiply(#ff6600, #000000);

multiply(#ff6600, #333333);

multiply(#ff6600, #666666);

multiply(#ff6600, #999999);

multiply(#ff6600, #cccccc);

multiply(#ff6600, #ffffff);

multiply(#ff6600, #ff0000);

multiply(#ff6600, #00ff00);

multiply(#ff6600, #0000ff);

screen

与 multiply 函数效果相反，输出结果是更亮的颜色。（译注：对应Photoshop中的“变亮/滤色”。）

参数：

• color1: 颜色对象。
• color2: 颜色对象。

返回值： 颜色（color）

案例：

screen(#ff6600, #000000);

screen(#ff6600, #333333);

screen(#ff6600, #666666);

screen(#ff6600, #999999);

screen(#ff6600, #cccccc);

screen(#ff6600, #ffffff);

screen(#ff6600, #ff0000);

screen(#ff6600, #00ff00);

screen(#ff6600, #0000ff);

overlay

结合 multiply 与 screen 两个函数的效果，令浅的颜色变得更浅，深的颜色变得更深。（译注：对应 Photoshop 中的“叠加”。）注意：输出结果由第一个颜色参数决定。

参数：

• color1: 基准颜色对象。也就是用以确定最终结果是浅些还是深些的参考色。
• color2: 颜色对象。

返回值： 颜色（color）

案例：

overlay(#ff6600, #000000);

overlay(#ff6600, #333333);

overlay(#ff6600, #666666);

overlay(#ff6600, #999999);

overlay(#ff6600, #cccccc);

overlay(#ff6600, #ffffff);

overlay(#ff6600, #ff0000);

overlay(#ff6600, #00ff00);

overlay(#ff6600, #0000ff);

softlight

与 overlay 函数效果相似，只是当纯黑色或纯白色作为参数时输出结果不会是纯黑色或纯白色。（译注：对应Photoshop中的“柔光”。）

参数：

• color1: 混合色（光源）。
• color2: 被混合的颜色。

返回值： 颜色（color）

案例：

softlight(#ff6600, #000000);

softlight(#ff6600, #333333);

softlight(#ff6600, #666666);

softlight(#ff6600, #999999);

softlight(#ff6600, #cccccc);

softlight(#ff6600, #ffffff);

softlight(#ff6600, #ff0000);

softlight(#ff6600, #00ff00);

softlight(#ff6600, #0000ff);

hardlight

与 overlay 函数效果相似，不过由第二个颜色参数决定输出颜色的亮度或黑度，而不是第一个颜色参数决定。（译注：对应Photoshop中的“强光/亮光/线性光/点光”。）

参数：

• color1: 混合色（光源）。
• color2: 基准色对象。它决定最终结果是亮些还是暗些。

返回值： 颜色（color）

案例：

hardlight(#ff6600, #000000);

hardlight(#ff6600, #333333);

hardlight(#ff6600, #666666);

hardlight(#ff6600, #999999);

hardlight(#ff6600, #cccccc);

hardlight(#ff6600, #ffffff);

hardlight(#ff6600, #ff0000);

hardlight(#ff6600, #00ff00);

hardlight(#ff6600, #0000ff);

difference

从第一个颜色值中减去第二个（分别计算 RGB 三种颜色通道），输出结果是更深的颜色。如果结果为负值则被反转。如果减去的颜色是黑色则不做改变；减去白色将得到颜色反转。（译注：对应Photoshop中的“差值/排除”。）

参数：

• color1: 被减的颜色对象。
• color2: 减去的颜色对象。

返回值： 颜色（color）

案例：

difference(#ff6600, #000000);

difference(#ff6600, #333333);

difference(#ff6600, #666666);

difference(#ff6600, #999999);

difference(#ff6600, #cccccc);

difference(#ff6600, #ffffff);

difference(#ff6600, #ff0000);

difference(#ff6600, #00ff00);

difference(#ff6600, #0000ff);

exclusion

效果与 difference() 函数效果相似，只是输出结果对比度更小 (lower contrast)。（译注：对应Photoshop中的“差值/排除”。）

参数：

• color1: 被减的颜色对象。
• color2: 减去的颜色对象。

返回值： 颜色（color）

案例：

exclusion(#ff6600, #000000);

exclusion(#ff6600, #333333);

exclusion(#ff6600, #666666);

exclusion(#ff6600, #999999);

exclusion(#ff6600, #cccccc);

exclusion(#ff6600, #ffffff);

exclusion(#ff6600, #ff0000);

exclusion(#ff6600, #00ff00);

exclusion(#ff6600, #0000ff);

average

分别对 RGB 的三种颜色值取平均值，然后输出结果。

参数：

• color1: 颜色对象。
• color2: 颜色对象。

返回值： 颜色（color）

案例：

average(#ff6600, #000000);

average(#ff6600, #333333);

average(#ff6600, #666666);

average(#ff6600, #999999);

average(#ff6600, #cccccc);

average(#ff6600, #ffffff);

average(#ff6600, #ff0000);

average(#ff6600, #00ff00);

average(#ff6600, #0000ff);

negation

与 difference 函数效果相反。

输出结果是更亮的颜色。注意：效果 相反 不代表做加法运算。

参数：

• color1: 被减的颜色对象。
• color2: 减去的颜色对象。

返回值： 颜色（color）

案例：

negation(#ff6600, #000000);

negation(#ff6600, #333333);

negation(#ff6600, #666666);

negation(#ff6600, #999999);

negation(#ff6600, #cccccc);

negation(#ff6600, #ffffff);

negation(#ff6600, #ff0000);

negation(#ff6600, #00ff00);

negation(#ff6600, #0000ff);