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

default

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

案例：

.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

字符串函数

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%

颜色操作函数

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%)

80e619 ➜ 80ff00

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%)

80e619 ➜ 80cc33

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%)

80e619 ➜ b3f075

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%)

80e619➜4d8a0f

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%)

f2330d ➜ f2a60d

f2330d ➜ f20d59

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%)

输出：

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

ff0000 + 0000ff ➜ 800080

greyscale

Remove all saturation from a color in the HSL color space; the same as calling desaturate(@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 as greyscale('#00ff00'), though they appear quite different in brightness to the human eye.

参数： color: 颜色对象。

返回值： color

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

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

80f20d ➜ 808080

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

80f20d ➜ 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 their luma 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 案例：

000000 ffffff dddddd 000000 ffffff

颜色混合函数

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

multiply

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

参数：

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

返回值： 颜色（color）

案例:

multiply(#ff6600, #000000);

ff6600 000000 000000

multiply(#ff6600, #333333);

ff6600 333333 331400

multiply(#ff6600, #666666);

ff6600 666666 662900

multiply(#ff6600, #999999);

ff6600 999999 993d00

multiply(#ff6600, #cccccc);

ff6600 cccccc cc5200

multiply(#ff6600, #ffffff);

ff6600 ffffff ff6600

multiply(#ff6600, #ff0000);

ff6600 ff0000 ff0000

multiply(#ff6600, #00ff00);

ff6600 00ff00 006600

multiply(#ff6600, #0000ff);

ff6600 0000ff 000000

screen

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

参数：

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

返回值： 颜色（color）

案例：

screen(#ff6600, #000000);

ff6600 000000 ff6600

screen(#ff6600, #333333);

ff6600 333333 ff8533

screen(#ff6600, #666666);

ff6600 666666 ffa366

screen(#ff6600, #999999);

ff6600 999999 ffc299

screen(#ff6600, #cccccc);

ff6600 cccccc ffe0cc

screen(#ff6600, #ffffff);

ff6600 ffffff ffffff

screen(#ff6600, #ff0000);

ff6600 ff0000 ff6600

screen(#ff6600, #00ff00);

ff6600 999999 ffff00

screen(#ff6600, #0000ff);

ff6600 999999 ff66ff

overlay

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

参数：

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

返回值： 颜色（color）

案例：

overlay(#ff6600, #000000);

ff6600 000000 ff0000

overlay(#ff6600, #333333);

ff6600 333333 ff2900

overlay(#ff6600, #666666);

ff6600 666666 ff5200

overlay(#ff6600, #999999);

ff6600 999999 ff7a00

overlay(#ff6600, #cccccc);

ff6600 cccccc ffa300

overlay(#ff6600, #ffffff);

ff6600 ffffff ffcc00

overlay(#ff6600, #ff0000);

ff6600 ff0000 ff0000

overlay(#ff6600, #00ff00);

ff6600 00ff00 ffcc00

overlay(#ff6600, #0000ff);

ff6600 0000ff ff0000

softlight

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

参数：

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

返回值： 颜色（color）

案例：

softlight(#ff6600, #000000);

ff6600 000000 ff2900

softlight(#ff6600, #333333);

ff6600 333333 ff4100

softlight(#ff6600, #666666);

ff6600 666666 ff5a00

softlight(#ff6600, #999999);

ff6600 999999 ff7200

softlight(#ff6600, #cccccc);

ff6600 cccccc ff8a00

softlight(#ff6600, #ffffff);

ff6600 ffffff ffa100

softlight(#ff6600, #ff0000);

ff6600 ff0000 ff2900

softlight(#ff6600, #00ff00);

ff6600 00ff00 ffa100

softlight(#ff6600, #0000ff);

ff6600 0000ff ff2900

hardlight

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

参数：

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

返回值： 颜色（color）

案例：

hardlight(#ff6600, #000000);

ff6600 000000 000000

hardlight(#ff6600, #333333);

ff6600 333333 662900

hardlight(#ff6600, #666666);

ff6600 666666 cc5200

hardlight(#ff6600, #999999);

ff6600 999999 ff8533

hardlight(#ff6600, #cccccc);

ff6600 cccccc ff2900

hardlight(#ff6600, #ffffff);

ff6600 ffffff ffffff

hardlight(#ff6600, #ff0000);

ff6600 ff0000 ff0000

hardlight(#ff6600, #00ff00);

ff6600 00ff00 00ff00

hardlight(#ff6600, #0000ff);

ff6600 0000ff 0000ff

difference

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

参数：

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

返回值： 颜色（color）

案例：

difference(#ff6600, #000000);

ff6600 000000 ff6600

difference(#ff6600, #333333);

ff6600 333333 cc3333

difference(#ff6600, #666666);

ff6600 666666 990066

difference(#ff6600, #999999);

ff6600 999999 663399

difference(#ff6600, #cccccc);

ff6600 cccccc 3366cc

difference(#ff6600, #ffffff);

ff6600 ffffff 0099ff

difference(#ff6600, #ff0000);

ff6600 ff0000 006600

difference(#ff6600, #00ff00);

ff6600 00ff00 ff9900

difference(#ff6600, #0000ff);

ff6600 0000ff ff66ff

exclusion

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

参数：

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

返回值： 颜色（color）

案例：

exclusion(#ff6600, #000000);

ff6600 000000 ff6600

exclusion(#ff6600, #333333);

ff6600 333333 cc7033

exclusion(#ff6600, #666666);

ff6600 666666 997a66

exclusion(#ff6600, #999999);

ff6600 999999 668599

exclusion(#ff6600, #cccccc);

ff6600 cccccc 338fcc

exclusion(#ff6600, #ffffff);

ff6600 ffffff 0099ff

exclusion(#ff6600, #ff0000);

ff6600 ff0000 006600

exclusion(#ff6600, #00ff00);

ff6600 00ff00 ff9900

exclusion(#ff6600, #0000ff);

ff6600 0000ff ff66ff

average

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

参数：

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

返回值： 颜色（color）

案例：

average(#ff6600, #000000);

ff6600 000000 803300

average(#ff6600, #333333);

ff6600 333333 994d1a

average(#ff6600, #666666);

ff6600 666666 b36633

average(#ff6600, #999999);

ff6600 999999 cc804d

average(#ff6600, #cccccc);

ff6600 cccccc e69966

average(#ff6600, #ffffff);

ff6600 ffffff ffb380

average(#ff6600, #ff0000);

ff6600 ff0000 ff3300

average(#ff6600, #00ff00);

ff6600 00ff00 80b300

average(#ff6600, #0000ff);

ff6600 0000ff 803380

negation

与 difference 函数效果相反。

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

参数：

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

返回值： 颜色（color）

案例：

negation(#ff6600, #000000);

ff6600 000000 ff6600

negation(#ff6600, #333333);

ff6600 333333 cc9933

negation(#ff6600, #666666);

ff6600 666666 99cc66

negation(#ff6600, #999999);

ff6600 999999 66ff99

negation(#ff6600, #cccccc);

ff6600 cccccc 33cccc

negation(#ff6600, #ffffff);

ff6600 ffffff 0099ff

negation(#ff6600, #ff0000);

ff6600 ff0000 006600

negation(#ff6600, #00ff00);

ff6600 00ff00 ff9900

negation(#ff6600, #0000ff);

ff6600 0000ff ff66ff

 

posted @ 2017-11-29 08:52  歪脖先生  阅读(5410)  评论(0)  编辑  收藏  举报