Edit the markdown source for "logical-functions"

if

根据条件返回两个值中的一个。

参数：

• condition：一个布尔表达式
• value1：当 condition 为真时返回的值。
• value2：当 condition 不为真时返回的值。

发布：v3.0.0 更新：v3.6.0

示例：

@some: foo;

div {
    margin: if((2 > 1), 0, 3px);
    color:  if((iscolor(@some)), @some, black);
}

结果：

div {
    margin: 0;
    color:  black;
}

注意：作为 conditional 参数支持的布尔表达式与保护语句的相同。

if(not (true), foo, bar);
if((true) and (2 > 1), foo, bar);
if((false) or (isstring("boo!")), foo, bar);

注意：在 Less 3.6 之前，条件需要一组括号。

if(2 > 1, blue, green);   // 在 3.0-3.5.3 版本中会导致错误
if((2 > 1), blue, green); // 3.6+ 版本正常

boolean

计算为真或假

你可以"存储"一个布尔测试以便稍后在保护或 if() 中进行评估。

参数：

• condition：一个布尔表达式

发布：v3.0.0 更新：v3.6.0

示例：

@bg: black;
@bg-light: boolean(luma(@bg) > 50%);

div {
  background: @bg; 
  color: if(@bg-light, black, white);
}

结果：

div {
  background: black;
  color: white;
}

Edit the markdown source for "string-functions"

escape

对输入字符串中的特殊字符应用 URL 编码。

• 这些字符不会被编码：,, /, ?, @, &, +, ', ~, ! 和 $。
• 最常见的编码字符是：\<空格\>, #, ^, (, ), {, }, |, :, >, <, ;, ], [ 和 =。

参数：string：要转义的字符串。

返回：不带引号的转义后的 string 内容。

示例：

escape('a=1')

输出：

a%3D1

注意：如果参数不是字符串，输出是未定义的。当前的实现对颜色返回 undefined，对其他类型的参数返回未更改的输入。不应依赖此行为，并且可能在将来发生变化。

e

字符串转义。

它期望一个字符串作为参数，并按原样返回其内容，但不带引号。它可用于输出要么不是有效 CSS 语法，要么使用 Less 无法识别的专有语法的 CSS 值。

参数：string - 要转义的字符串。

返回：string - 转义后的字符串，不带引号。

示例：

@mscode: "ms:alwaysHasItsOwnSyntax.For.Stuff()" 
filter: e(@mscode);

输出：

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;

Edit the markdown source for "list-functions"

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;

range

发布于 v3.9.0

生成跨越一系列值的列表

参数

• start - （可选）起始值 例如 1 或 1px
• end - 结束值 例如 5px
• step - （可选）增量

示例：

value: range(4);

输出：

value: 1 2 3 4;

范围内每个值的输出将与 end 值的单位相同。例如：

value: range(10px, 30px, 10);

输出：

value: 10px 20px 30px;

each

发布于 v3.7.0

将规则集的求值绑定到列表的每个成员。

参数

• list - 逗号或空格分隔的值列表。
• rules - 匿名规则集/混合器

示例：

@selectors: blue, green, red;

each(@selectors, {
  .sel-@{value} {
    a: b;
  }
});

输出：

.sel-blue {
  a: b;
}
.sel-green {
  a: b;
}
.sel-red {
  a: b;
}

默认情况下，每个规则集都绑定到 @value、@key 和 @index 变量。对于大多数列表，@key 和 @index 将被分配相同的值（数字位置，从 1 开始）。但是，你也可以使用规则集本身作为结构化列表。例如：

@set: {
  one: blue;
  two: green;
  three: red;
}
.set {
  each(@set, {
    @{key}-@{index}: @value;
  });
}

这将输出：

.set {
  one-1: blue;
  two-2: green;
  three-3: red;
}

由于你当然可以为每个规则集调用带有保护的混合器，这使得 each() 成为一个非常强大的函数。

在 each() 中设置变量名

你不必在 each() 函数中使用 @value、@key 和 @index。在 Less 3.7 中，使用 each() 函数，Less 引入了匿名混合器的概念，这可能会在以后扩展到语法的其他部分。

匿名混合器使用 #() 或 .() 的形式，以 . 或 # 开头，就像常规混合器一样。在 each() 中，你可以这样使用：

.set-2() {
  one: blue;
  two: green;
  three: red;
}
.set-2 {
  // 调用混合器并迭代每个规则
  each(.set-2(), .(@v, @k, @i) {
    @{k}-@{i}: @v;
  });
}

这将按预期输出：

.set-2 {
  one-1: blue;
  two-2: green;
  three-3: red;
}

each() 函数将获取在匿名混合器中定义的变量名，并将它们绑定到 @value、@key 和 @index 值，按此顺序。如果你只写 each(@list, #(@value) {}), 那么 @key 和 @index 将不会被定义。

使用 range 和 each 创建 for 循环

需要 Less v3.9.0

你可以通过生成数字列表并使用 each 将其扩展为规则集来模拟 for 循环。

示例：

each(range(4), {
  .col-@{value} {
    height: (@value * 50px);
  }
});

输出：

.col-1 {
  height: 50px;
}
.col-2 {
  height: 100px;
}
.col-3 {
  height: 150px;
}
.col-4 {
  height: 200px;
}

Edit the markdown source for "math-functions"

ceil

向上取整到下一个最高整数。

参数：number - 浮点数。

返回：integer

示例：ceil(2.4)

输出：3

floor

向下取整到下一个最低整数。

参数：number - 浮点数。

返回：integer

示例：floor(2.6)

输出：2

percentage

将浮点数转换为百分比字符串。

参数：number - 浮点数。

返回：number

示例：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

示例 #1：abs(25cm)

输出：25cm

示例 #2：abs(-18.6%)

输出：18.6%;

sin

计算正弦函数。

对于没有单位的数字，假定为弧度。

参数：number - 浮点数。

返回：number

示例：

sin(1); // 1 弧度的正弦
sin(1deg); // 1 度的正弦
sin(1grad); // 1 梯度的正弦

输出：

0.8414709848078965; // 1 弧度的正弦
0.01745240643728351; // 1 度的正弦
0.015707317311820675; // 1 梯度的正弦

asin

计算反正弦（正弦的反函数）。

返回弧度数，即介于 -π/2 和 π/2 之间的数字。

参数：number - 区间 [-1, 1] 内的浮点数。

返回：number

示例：

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

输出：

-1rad
0rad
NaNrad

cos

计算余弦函数。

对于没有单位的数字，假定为弧度。

参数：number - 浮点数。

返回：number

示例：

cos(1) // 1 弧度的余弦
cos(1deg) // 1 度的余弦
cos(1grad) // 1 梯度的余弦

输出：

0.5403023058681398 // 1 弧度的余弦
0.9998476951563913 // 1 度的余弦
0.9998766324816606 // 1 梯度的余弦

acos

计算反余弦（余弦的反函数）。

返回弧度数，即介于 0 和 π 之间的数字。

参数：number - 区间 [-1, 1] 内的浮点数。

返回：number

示例：

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

输出：

1rad
0rad
NaNrad

tan

计算正切函数。

对于没有单位的数字，假定为弧度。

参数：number - 浮点数。

返回：number

示例：

tan(1) // 1 弧度的正切
tan(1deg) // 1 度的正切
tan(1grad) // 1 梯度的正切

输出：

1.5574077246549023   // 1 弧度的正切
0.017455064928217585 // 1 度的正切
0.015709255323664916 // 1 梯度的正切

atan

计算反正切（正切的反函数）。

返回弧度数，即介于 -π/2 和 π/2 之间的数字。

参数：number - 浮点数。

返回：number

示例：

atan(-1.5574077246549023)
atan(0)
round(atan(22), 6) // 22 的反正切，四舍五入到 6 位小数

输出：

-1rad
0rad
1.525373rad;

pi

返回 π（圆周率）。

参数：无

返回：number

示例：

pi()

输出：

3.141592653589793

pow

返回第一个参数的值提升到第二个参数的幂。

返回值的维度与第一个参数相同，第二个参数的维度被忽略。

参数：

• number：基数 - 浮点数。
• number：指数 - 浮点数。

返回：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%

Edit the markdown source for "type-functions"

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

isruleset

如果值是规则集，返回 true，否则返回 false。

参数：

• value - 正在评估的变量。

返回：如果值是规则集，返回 true，否则返回 false。

示例：

@rules: {
    color: red;
}

isruleset(@rules);   // true
isruleset(#ff0);     // false
isruleset(blue);     // false
isruleset("string"); // false
isruleset(1234);     // false
isruleset(56px);     // false
isruleset(7.8%);     // false
isruleset(keyword);  // false
isruleset(url(...)); // false

isdefined

发布于 v4.0.0

如果变量已定义，返回 true，否则返回 false。

参数：variable - 正在评估的变量。

示例：

@foo: 1;
isdefined(@foo);     // true
isdefined(@bar);     // false

Edit the markdown source for "misc-functions"

color

解析颜色，使字符串形式的颜色成为一个颜色对象。

参数：string：指定颜色的字符串。

返回：color

示例：color("#aaa");

输出：#aaa

image-size

获取文件的图像尺寸。

参数：string：要获取尺寸的文件。

返回：dimension

示例：image-size("file.png");

输出：10px 10px

注意：此函数需要由每个环境实现。目前仅在 node 环境中可用。

添加于：v2.2.0

image-width

获取文件的图像宽度。

参数：string：要获取尺寸的文件。

返回：dimension

示例：image-width("file.png");

输出：10px

注意：此函数需要由每个环境实现。目前仅在 node 环境中可用。

添加于：v2.2.0

image-height

获取文件的图像高度。

参数：string：要获取尺寸的文件。

返回：dimension

示例：image-height("file.png");

输出：10px

注意：此函数需要由每个环境实现。目前仅在 node 环境中可用。

添加于：v2.2.0

convert

将数字从一个单位转换为另一个单位。

第一个参数包含带单位的数字，第二个参数包含单位。如果单位兼容，则转换数字。如果它们不兼容，则返回原始参数。

参见 unit 以在不转换的情况下更改单位。

兼容的单位组：

• 长度：m、cm、mm、in、pt 和 pc，
• 时间：s 和 ms，
• 角度：rad、deg、grad 和 turn。

参数：

• number：带单位的浮点数。
• identifier、string 或 escaped value：单位

返回：number

示例：

convert(9s, "ms")
convert(14cm, mm)
convert(8, mm) // 不兼容的单位类型

输出：

9000ms
140mm
8

data-uri

内联资源，如果 ieCompat 选项开启且资源过大，或者在浏览器中使用该函数，则回退到 url()。如果未给出 MIME 类型，则 node 使用 mime 包来确定正确的 MIME 类型。

参数：

• mimetype：（可选）MIME 类型字符串。
• url：要内联的文件的 URL。

如果没有 mimetype，data-uri 函数从文件后缀猜测它。文本和 svg 文件以 utf-8 编码，其他文件以 base64 编码。

如果用户提供了 mimetype，则如果 mimetype 参数以 ;base64 结尾，函数使用 base64。例如，image/jpeg;base64 被编码为 base64，而 text/html 被编码为 utf-8。

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

示例：data-uri('image/svg+xml;charset=UTF-8', 'image.svg');

输出：url("data:image/svg+xml;charset=UTF-8,%3Csvg%3E%3Ccircle%20r%3D%229%22%2F%3E%3C%2Fsvg%3E");

default

仅在保护条件内可用，仅当没有其他混合器匹配时返回 true，否则返回 false。

示例：

.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;
}

可以将 default 返回的值与保护运算符一起使用。例如 .mixin() when not(default()) {} 仅在至少有一个其他混合器定义匹配 .mixin() 调用时匹配：

.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 {
  /* ... */
}

在同一保护条件或具有相同名称的混合器的不同条件中，允许多次调用 default()：

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

  .m(1); // 正常
}

但是，如果 Less 检测到多个使用 default() 的混合器定义之间存在潜在冲突，它将抛出错误：

div {
  .m(@x) when (default())    {}
  .m(@x) when not(default()) {}

  .m(1); // 错误
}

在上面的示例中，不可能确定每个 default() 调用应返回什么值，因为它们递归地相互依赖。

高级多重 default() 使用：

.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;
}

default 函数仅在混合器保护表达式内部作为 Less 内置函数可用。如果在混合器保护条件之外使用，它将被解释为常规 CSS 值：

示例：

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

结果：

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

unit

删除或更改维度的单位

参数：

• dimension：带或不带单位的数字。
• unit：（可选）要更改为的单位，如果省略，则删除单位。

参见 convert 以进行带转换的单位更改。

示例：unit(5, px)

输出：5px

示例：unit(5em)

输出：5

get-unit

返回数字的单位。

如果参数包含带单位的数字，函数返回其单位。没有单位的参数将返回空值。

参数：

• number：带或不带单位的数字。

示例：get-unit(5px)

输出：px

示例：get-unit(5)

输出：//无内容

svg-gradient

生成多停止 svg 渐变。

svg-gradient 函数生成多停止 svg 渐变。它必须至少有三个参数。第一个参数指定渐变类型和方向，其余参数列出颜色及其位置。第一个和最后一个指定颜色的位置是可选的，其余颜色必须指定位置。

方向必须是 to bottom、to right、to bottom right、to top right、ellipse 或 ellipse at center 之一。方向可以指定为转义值 ~'to bottom' 或空格分隔的单词列表 to bottom。

方向必须后跟两个或多个颜色停止点。它们可以在列表内提供，也可以在单独的参数中指定每个颜色停止点。

参数 - 列表中的颜色停止点：

• escaped value 或 标识符列表：方向
• list - 列表中的所有颜色及其位置

参数 - 参数中的颜色停止点：

• escaped value 或 标识符列表：方向
• color [percentage] 对：第一个颜色及其相对位置（位置是可选的）
• color percent 对：（可选）第二个颜色及其相对位置
• ...
• color percent 对：（可选）第 n 个颜色及其相对位置
• color [percentage] 对：最后一个颜色及其相对位置（位置是可选的）

返回：带有 "URI 编码" 的 svg 渐变的 url。

示例 - 列表中的颜色停止点：

div {
  @list: red, green 30%, blue;
  background-image: svg-gradient(to right, @list);
}

等效 - 参数中的颜色停止点：

div {
  background-image: svg-gradient(to right, red, green 30%, blue);
}

两者都生成：

div {
  background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%201%201%22%20preserveAspectRatio%3D%22none%22%3E%3ClinearGradient%20id%3D%22gradient%22%20gradientUnits%3D%22userSpaceOnUse%22%20x1%3D%220%25%22%20y1%3D%220%25%22%20x2%3D%22100%25%22%20y2%3D%220%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23ff0000%22%2F%3E%3Cstop%20offset%3D%2230%25%22%20stop-color%3D%22%23008000%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%230000ff%22%2F%3E%3C%2FlinearGradient%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22url(%23gradient)%22%20%2F%3E%3C%2Fsvg%3E');
}

注意：在 2.2.0 版本之前，结果是 base64 编码的。

生成的背景图像在左侧为红色，在宽度的 30% 处为绿色，以蓝色结束。Base64 编码的部分包含以下 svg 渐变：

<?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
    <linearGradient id="gradient" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" stop-color="#ff0000"/>
        <stop offset="30%" stop-color="#008000"/>
        <stop offset="100%" stop-color="#0000ff"/>
    </linearGradient>
    <rect x="0" y="0" width="1" height="1" fill="url(#gradient)" />
</svg>

Edit the markdown source for "color-definition"

rgb

从十进制红、绿、蓝（RGB）值创建一个不透明的颜色对象。

标准 HTML/CSS 格式的颜色文字值也可用于定义颜色，例如 #ff0000。

参数：

• red：整数 0-255 或百分比 0-100%。
• green：整数 0-255 或百分比 0-100%。
• blue：整数 0-255 或百分比 0-100%。

返回：color

示例：rgb(90, 129, 32)

输出：#5a8120

rgba

从十进制红、绿、蓝和透明度（RGBA）值创建一个透明的颜色对象。

参数：

• 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！）。

此格式用于 Internet Explorer、.NET 和 Android 开发。

参数：color，颜色对象。

返回：string

示例：argb(rgba(90, 23, 148, 0.5));

输出：#805a1794

hsl

从色相、饱和度和亮度（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 的色相，以及自己的饱和度和亮度。

hsla

从色相、饱和度、亮度和透明度（HSLA）值创建一个透明的颜色对象。

参数：

• hue：表示度数的整数 0-360。
• saturation：百分比 0-100% 或数字 0-1。
• lightness：百分比 0-100% 或数字 0-1。
• alpha：百分比 0-100% 或数字 0-1。

返回：color

示例：hsla(90, 100%, 50%, 0.5)

输出：rgba(128, 255, 0, 0.5)

hsv

从色相、饱和度和明度（HSV）值创建一个不透明的颜色对象。

注意，这是 Photoshop 中可用的色彩空间，与 hsl 不同。

参数：

• hue：表示度数的整数 0-360。
• saturation：百分比 0-100% 或数字 0-1。
• value：百分比 0-100% 或数字 0-1。

返回：color

示例：hsv(90, 100%, 50%)

输出：#408000

hsva

从色相、饱和度、明度和透明度（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)

Edit the markdown source for "color-channel"

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

提取颜色对象在 HSV 色彩空间中的明度通道。

参数：color - 一个颜色对象。

返回：percentage 0-100

示例：hsvvalue(hsv(90, 100%, 50%))

输出：50%

red

提取颜色对象的红色通道。

参数：color - 一个颜色对象。

返回：float 0-255

示例：red(rgb(10, 20, 30))

输出：10

green

提取颜色对象的绿色通道。

参数：color - 一个颜色对象。

返回：float 0-255

示例：green(rgb(10, 20, 30))

输出：20

blue

提取颜色对象的蓝色通道。

参数：color - 一个颜色对象。

返回：float 0-255

示例：blue(rgb(10, 20, 30))

输出：30

alpha

提取颜色对象的透明度通道。

参数：color - 一个颜色对象。

返回：float 0-1

示例：alpha(rgba(10, 20, 30, 0.5))

输出：0.5

luma

计算颜色对象的 luma（感知亮度）。

使用 SMPTE C / Rec. 709 系数，如 WCAG 2.0 中推荐的。这个计算也用于对比度函数。

在 v1.7.0 之前，luma 是在没有伽马校正的情况下计算的，使用 luminance 函数可以计算这些"旧"值。

参数：color - 一个颜色对象。

返回：percentage 0-100%

示例：luma(rgb(100, 200, 30))

输出：44%

luminance

计算不经伽马校正的 luma 值（在 v1.7.0 之前，此函数名为 luma）

参数：color - 一个颜色对象。

返回：percentage 0-100%

示例：luminance(rgb(100, 200, 30))

输出：65%

Edit the markdown source for "color-operations"

颜色操作通常使用与被更改值相同的单位，百分比被视为绝对值，因此将 10% 的值增加 10% 会得到 20%。将选项方法参数设置为 relative 可使用相对百分比。使用相对百分比时，将 10% 的值增加 10% 会得到 11%。值被限制在其允许的范围内；它们不会环绕。在显示返回值的地方，我们使用了能清楚地说明每个函数所做操作的格式，除了你通常会使用的十六进制版本。

saturate

在 HSL 色彩空间中按绝对值增加颜色的饱和度。

参数：

• color：一个颜色对象。
• amount：百分比 0-100%。
• method：可选，设置为 relative 以相对于当前值进行调整。

返回：color

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

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

➜

desaturate

在 HSL 色彩空间中按绝对值降低颜色的饱和度。

参数：

• color：一个颜色对象。
• amount：百分比 0-100%。
• method：可选，设置为 relative 以相对于当前值进行调整。

返回：color

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

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

➜

lighten

在 HSL 色彩空间中按绝对值增加颜色的亮度。

参数：

• color：一个颜色对象。
• amount：百分比 0-100%。
• method：可选，设置为 relative 以相对于当前值进行调整。

返回：color

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

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

➜

darken

在 HSL 色彩空间中按绝对值降低颜色的亮度。

参数：

• color：一个颜色对象。
• amount：百分比 0-100%。
• method：可选，设置为 relative 以相对于当前值进行调整。

返回：color

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

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

➜

fadein

减少颜色的透明度（或增加不透明度），使其更加不透明。

对不透明的颜色没有影响。要向另一个方向淡入，请使用 fadeout。

参数：

• color：一个颜色对象。
• amount：百分比 0-100%。
• method：可选，设置为 relative 以相对于当前值进行调整。

返回：color

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

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

fadeout

增加颜色的透明度（或降低不透明度），使其更加透明。要向另一个方向淡入，请使用 fadein。

参数：

• color：一个颜色对象。
• amount：百分比 0-100%。
• method：可选，设置为 relative 以相对于当前值进行调整。

返回：color

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

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

fade

设置颜色的绝对不透明度。可以应用于任何颜色，无论它们是否已经具有透明度值。

参数：

• color：一个颜色对象。
• amount：百分比 0-100%。

返回：color

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

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

spin

旋转颜色的色相角度，无论朝哪个方向旋转。

虽然角度范围是 0-360，但它应用了 mod 360 操作，所以你可以传递更大（或负）的值，它们会环绕，例如角度为 360 和 720 将产生相同的结果。请注意，颜色通过 RGB 转换，这不会保留灰色（因为灰色没有饱和度）的色相值，所以确保你以保持色相的方式应用函数，例如不要这样做：

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

这样做：

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

颜色总是返回为 RGB 值，因此将 spin 应用于灰色值将不起作用。

参数：

• color：一个颜色对象。
• angle：要旋转的度数（+或-）。

返回：color

示例：

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

输出：

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

➜

➜

mix

在变量比例下混合两种颜色。透明度包含在计算中。

参数：

• color1：一个颜色对象。
• color2：一个颜色对象。
• weight：可选，两个颜色之间的百分比平衡点，默认为 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)

+ ➜

tint

在变量比例下将颜色与白色混合。它与调用 mix(#ffffff, @color, @weight) 相同

参数：

• color：一个颜色对象。
• weight：可选，颜色和白色之间的百分比平衡点，默认为 50%。

返回：color

示例：

no-alpha: tint(#007fff, 50%); 
with-alpha: tint(rgba(00,0,255,0.5), 50%); 

输出：

no-alpha: #80bfff;
with-alpha: rgba(191, 191, 255, 0.75);

➜

shade

在变量比例下将颜色与黑色混合。它与调用 mix(#000000, @color, @weight) 相同

参数：

• color：一个颜色对象。
• weight：可选，颜色和黑色之间的百分比平衡点，默认为 50%。

返回：color

示例：

no-alpha: shade(#007fff, 50%); 
with-alpha: shade(rgba(00,0,255,0.5), 50%); 

输出：

no-alpha: #004080;
with-alpha: rgba(0, 0, 64, 0.75);

➜

greyscale

从 HSL 色彩空间中删除颜色的所有饱和度；与调用 desaturate(@color, 100%) 相同。

因为饱和度不受色相影响，因此生成的颜色映射可能有点暗或浑浊；luma 可能提供更好的结果，因为它提取了感知而不是线性亮度，例如 greyscale('#0000ff') 将返回与 greyscale('#00ff00') 相同的值，尽管它们在亮度上看起来非常不同。

参数：color：一个颜色对象。

返回：color

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

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

➜

请注意，生成的灰色看起来比原始绿色更暗，即使其亮度值相同。

与使用 luma 进行比较（用法不同，因为 luma 返回单个值，而不是颜色）：

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

输出：#cacaca

➜

这次灰色看起来与绿色相同，即使它的值实际上更高。

contrast

选择两种颜色中哪种颜色与另一种颜色对比度最大。

这有助于确保颜色在背景上可读，这也是为了符合可访问性合规性。此函数的工作方式与 Compass for SASS 中的对比函数 相同。根据 WCAG 2.0，颜色使用它们的 gamma 校正 luma 值进行比较，而不是它们的亮度。

light 和 dark 参数可以以任何顺序提供 - 函数将计算它们的 luma 值并自动分配 light 和 dark，这意味着你不能使用此函数选择对比度最低的颜色，因为顺序相反。

参数：

• color：要比较的颜色。
• dark：可选 - 指定的暗色（默认为黑色）。
• light：可选 - 指定的亮色（默认为白色）。
• threshold：可选 - 百分比 0-100%，指定从 "dark" 到 "light" 的过渡位置（默认为 43%，匹配 SASS）。这用于偏向对比度一侧或另一侧，例如决定 50% 灰色背景是否应产生黑色或白色文本。通常会将此值设置为较低以用于 "较浅" 调色板，较高以用于 "较深" 调色板。

返回：color

示例：

p {
    a: contrast(#bbbbbb);
    b: contrast(#222222, #101010);
    c: contrast(#222222, #101010, #dddddd);
    d: contrast(hsl(90, 100%, 50%), #000000, #ffffff, 30%);
    e: contrast(hsl(90, 100%, 50%), #000000, #ffffff, 80%);
}

输出：

p {
    a: #000000 // black
    b: #ffffff // white
    c: #dddddd
    d: #000000 // black
    e: #ffffff // white
}

这些示例使用上述计算的背景和前景颜色；你可以看到你永远不会得到白色-白色或黑色-黑色，尽管你可以使用阈值来允许较低对比度的结果，如最后一个示例：

Edit the markdown source for "color-blending"

这些操作与图像编辑器（如 Photoshop、Fireworks 或 GIMP）中的混合模式相似（尽管不一定完全相同），因此你可以使用它们使 CSS 颜色与图像匹配。

multiply

将两种颜色相乘。取两种颜色各自的 RGB 通道，将它们相乘后除以 255。结果是一个较暗的颜色。

参数：

• 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 相反。结果是一个更亮的颜色。

参数：

• 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 的效果。有条件地使浅色通道更浅，深色通道更深。注意：结果的条件由第一个颜色参数决定。

参数：

• 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，但避免纯黑导致纯黑，纯白导致纯白。

参数：

• 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 相同，但颜色角色相反。

参数：

• 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

在通道级别上从第一种颜色中减去第二种颜色。负值被反转。减去黑色不会改变颜色；减去白色会导致颜色反转。

参数：

• 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 类似，但对比度更低。

参数：

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