函数

Less支持的内置函数。

逻辑函数

如果

根据条件返回两个值之一。

参数：

  • condition：布尔表达式
  • value1：如果condition为true，则返回一个值。
  • 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参数支持的布尔表达式与Guard Statements相同。

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);   // Causes an error in 3.0-3.5.3
if((2 > 1), blue, green); // Ok 3.0+

布尔值

评估为真或假

您可以将一个布尔测试“存储”在警卫队或队中，供以后评估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;
}

字符串函数

逃逸

将URL编码应用于在输入字符串中找到的特殊字符。

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

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

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

例：

escape('a=1')

输出：

a%3D1

注意：如果参数不是字符串，则未定义输出。当前实现返回undefined颜色，而其他任何类型的参数均保持不变。这种行为不应该被依赖，将来可能会改变。

Ë

字符串转义。

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

参数：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*：用于替换占位符的值。

返回：formatted 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";

更换

替换字符串中的文本。

发布了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;

清单函数

长度

返回值列表中的元素数。

参量

  • list -用逗号或空格分隔的值列表。

例： length(1px solid #0080ff);

输出： 3

例：

@list: "banana", "tomato", "potato", "peach";
n: length(@list);

输出：

n: 4;

提取

返回列表中指定位置的值。

参量

  • list -用逗号或空格分隔的值列表。
  • index -一个整数，指定要返回的列表元素的位置。

例： extract(8px dotted red, 2);

输出： dotted

例：

@list: apple, pear, coconut, orange;
value: extract(@list, 3);

输出：

value: coconut;

范围

发布了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;

每

发布了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;
}

当然，由于您可以为每个规则集调用使用守卫来调用带有混合函数的mixin，因此这将each()产生非常强大的函数。

在中设置变量名称 each()

您没有使用@value，@key以及@index在你的each()函数。在Less 3.7中，Less使用该each()函数引入了匿名混入的概念，该混入可能会在以后扩展到语法的其他部分。

一位不愿具名的混入使用的形式，#()或.()以开始.或者#就像一个普通的混入会。在中each()，您可以像这样使用它：

.set-2() {
  one: blue;
  two: green;
  three: red;
}
.set-2 {
  // Call mixin and iterate each rule
  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将被定义。

for使用range和创建循环each

需要更少的v3.9.0

您可以for简单地通过生成数字列表并将each其扩展为规则集来模拟循环。

例：

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

输出：

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

数学函数

细胞

向上舍入到下一个最大整数。

参数：number-浮点数。

返回值： integer

例： ceil(2.4)

输出： 3

地板

向下舍入到下一个最小整数。

参数：number-浮点数。

返回值： integer

例： floor(2.6)

输出： 2

百分比

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

参数：number-浮点数。

返回值： number

例： percentage(0.5)

输出： 50%

回合

应用舍入。

参数：

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

腹肌

计算数字的绝对值。保持单位不变。

参数：number-浮点数。

返回值： number

范例1： abs(25cm)

输出： 25cm

范例2： abs(-18.6%)

输出： 18.6%;

罪

计算正弦函数。

假定数字的弧度不带单位。

参数：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

阿辛

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

返回以弧度表示的数字，例如-π/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

阿科斯

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

返回以弧度为单位的数字，例如0到π之间的数字。

参数：number-从[-1，1]间隔开始的浮点数。

返回值： number

例：

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

输出：

1rad
0rad
NaNrad

棕褐色

计算切线函数。

假定数字的弧度不带单位。

参数：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

晒黑

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

返回以弧度表示的数字，例如-π/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

战俘

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

返回值的尺寸与第一个参数的尺寸相同，而第二个参数的尺寸将被忽略。

参数：

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

模

返回第一个参数模数第二个参数的值。

返回值的尺寸与第一个参数的尺寸相同，而第二个参数的尺寸将被忽略。该函数还可以处理负数和浮点数。

参数：

  • number：一个浮点数。
  • number：一个浮点数。

返回值： number

例：

mod(0cm, 0px)
mod(11cm, 6px);
mod(-26%, -5);

输出：

NaNcm;
5cm
-1%;

分

返回一个或多个值中的最小值。

参数：value1, ..., valueN-一个或多个要比较的值。

返回：最小值。

例： min(5, 10);

输出： 5

例： min(3px, 42px, 1px, 16px);

输出： 1px

最高

返回一个或多个值中的最大值。

参数：value1, ..., valueN-一个或多个要比较的值。

返回：最大值。

例： max(5, 10);

输出： 10

例： max(3%, 42%, 1%, 16%);

输出： 42%


类型函数

isnumber

返回true值是否为数字，false否则返回。

参数：value-要评估的值或变量。

返回：true如果value是一个数字，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如果value是一个字符串，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

等色

返回true值是否是颜色，false否则返回。

参数：value-要评估的值或变量。

返回：true如果value是一种颜色，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如果value是关键字，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

返回true值是否为URL，false否则返回。

参数：value-要评估的值或变量。

返回：true如果value是一个url，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

等像素

返回true值是否是一个以像素为单位的数字，false否则返回。

参数：value-要评估的值或变量。

返回：true如果value是一个像素，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

等值

返回true值是否为em值，false否则返回。

参数：value-要评估的值或变量。

返回：true如果value是em值，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

等百分比

返回true值是否为百分比值，false否则返回。

参数：value-要评估的值或变量。

返回：true如果value是一个百分比值，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

单位

true如果值是指定单位的数字，则返回；false否则返回。

参数：

  • value -被评估的值或变量。
  • unit -要测试的单位标识符（可选加引号）。

返回：true如果value是指定单位的数字，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

以色列集

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

参数：

  • value -正在评估的变量。

返回：true如果value是一个规则集，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

杂项函数

颜色

解析颜色，因此代表颜色的字符串成为一种颜色。

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

返回值： color

例： color("#aaa");

输出： #aaa

图片尺寸

从文件获取图像尺寸。

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

返回值： dimension

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

输出： 10px 10px

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

在v2.2.0中添加

图像宽度

从文件获取图像宽度。

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

返回值： dimension

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

输出： 10px

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

在v2.2.0中添加

图像高度

从文件获取图像高度。

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

返回值： dimension

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

输出： 10px

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

在v2.2.0中添加

兑换

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

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

请参阅单位以更改单位而不进行转换。

兼容的单位组：

  • 长度：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) // incompatible unit types

输出：

9000ms
140mm
8

数据uri

内联资源，url()如果ieCompat选项打开并且资源太大，或者您在浏览器中使用该函数，则退回到该资源。如果未提供MIME类型，则节点将使用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");

默认

仅在警戒条件内可用，并且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()call 匹配的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()在相同保护条件下或在具有相同名称的mixins的不同条件下进行多个调用：

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

  .m(1); // OK
}

但是，如果Less 使用以下命令检测到多个mixin定义之间可能存在冲突，则会抛出错误default()：

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

  .m(1); // Error
}

在上面的示例中，无法确定每个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内置函数。如果在mixin保护条件之外使用，它将被解释为常规CSS值：

例：

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

结果：

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

单元

删除或更改尺寸单位

参数：

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

有关转换单位的信息，请参见转换。

例： unit(5, px)

输出： 5px

例： unit(5em)

输出： 5

获取单位

返回数字的单位。

如果参数包含带单位的数字，则该函数返回其单位。不带单位的参数将导致返回空值。

参数：

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

例： get-unit(5px)

输出： px

例： get-unit(5)

输出： //nothing

svg渐变

生成多级svg渐变。

SVG梯度函数生成多级SVG梯度。它必须至少具有三个参数。第一个参数指定渐变类型和方向，其余参数列出颜色及其位置。第一种和最后一种指定颜色的位置是可选的，其余颜色必须具有指定的位置。

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

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

参数-颜色在列表中停止：

  • escaped value或list of identifiers：方向
  • list -所有颜色及其在列表中的位置

参数-颜色停止在参数中：

  • escaped value或list of identifiers：方向
  • color [percentage] 对：第一种颜色及其相对位置（位置是可选的）
  • color percent 对：（可选）第二种颜色及其相对位置
  • ...
  • color percent 对：（可选）第n个颜色及其相对位置
  • color [percentage] 对：最后一种颜色及其相对位置（位置是可选的）

返回：url具有“ URI编码” svg梯度。

示例-颜色在列表中停止：

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-gradient：

<?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>

颜色定义函数

g

根据十进制的红色，绿色和蓝色（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

ba

根据十进制红色，绿色，蓝色和Alpha（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格式（NOT #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的色相，以及其自身的饱和度和亮度。

la

根据色相，饱和度，亮度和Alpha（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）值创建不透明的颜色对象。

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

参数：

  • hue：整数0-360，代表度。
  • saturation：百分比0-100％或数字0-1。
  • value：百分比0-100％或数字0-1。

返回值： color

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

输出： #408000

va

根据色相，饱和度，值和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)


色彩通道函数

色调

提取HSL颜色空间中颜色对象的色相通道。

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

返回值：integer0-360

例： hue(hsl(90, 100%, 50%))

输出： 90

饱和

提取HSL颜色空间中颜色对象的饱和度通道。

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

返回值：percentage0-100

例： saturation(hsl(90, 100%, 50%))

输出： 100%

亮度

提取HSL颜色空间中颜色对象的亮度通道。

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

返回值：percentage0-100

例： lightness(hsl(90, 100%, 50%))

输出： 50%

s

提取HSV颜色空间中颜色对象的色相通道。

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

返回值： integer 0-360

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

输出： 90

超饱和

提取HSV颜色空间中颜色对象的饱和度通道。

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

返回值：percentage0-100

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

输出： 100%

值

提取HSV颜色空间中颜色对象的值通道。

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

返回值：percentage0-100

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

输出： 50%

红色

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

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

返回值：float0-255

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

输出： 10

绿色

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

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

返回值：float0-255

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

输出： 20

蓝色

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

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

返回值：float0-255

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

输出： 30

α

提取颜色对象的Alpha通道。

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

返回值：float0-1

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

输出： 0.5

亮度

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

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

在v1.7.0之前，在不进行伽玛校正的情况下计算亮度，请使用亮度函数来计算这些“旧”值。

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

回报率：percentage0-100％

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

输出： 44%

亮度

在不进行伽玛校正的情况下计算亮度值（此函数luma在v1.7.0之前命名）

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

回报率：percentage0-100％

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

输出： 65%


色彩操作函数

色彩操作通常采用与其更改的值相同的单位来表示参数，并且百分比作为绝对值处理，因此将10％的值增加10％会得出20％。将选项方法参数设置为相对百分比的相对值。当使用相对百分比时，将10％的值增加10％可得出11％。值限制在其允许的范围内；他们不会四处走动。在显示返回值的地方，除了通常将要使用的十六进制版本外，我们还使用了清晰的格式来明确每个函数的函数。

饱和的

将HSL颜色空间中的颜色饱和度绝对增加。

参数：

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

返回值： color

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

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

80e619 ➜ 80ff00

去饱和

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

参数：

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

返回值： color

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

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

80e619 ➜ 80cc33

减轻

将HSL颜色空间中颜色的亮度绝对增加。

参数：

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

返回值： color

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

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

80e619 ➜ b3f075

变暗

将HSL色彩空间中的色彩亮度绝对减少一些。

参数：

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

返回值： color

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

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

80e619 ➜ 4d8a0f

淡入

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

对不透明的颜色没有影响。要在另一个方向上淡入淡出，请使用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)

消退

增加颜色的透明度（或减少不透明度），使其不透明性降低。要在另一个方向上淡入淡出，请使用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)

褪色

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

参数：

  • color：颜色对象。
  • amount：0-100％的百分比。

返回值： color

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

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

旋转

沿任一方向旋转颜色的色相角。

当角度范围是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%)

f2330d ➜ f2a60d

f2330d ➜ f20d59

混合

将两种颜色以可变比例混合在一起。不透明度包括在计算中。

参数：

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

ff0000+ 0000ff➜800080

着色

将颜色与白色以可变比例混合。和打电话一样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);

ff00ff ➜ ff80ff

阴影

将颜色与黑色以可变比例混合。和打电话一样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);

ff00ff ➜ 800080

灰度

从HSL色彩空间中消除所有饱和度；和打电话一样desaturate(@color, 100%)。

由于饱和度不受色相的影响，因此所得的颜色映射可能有些暗淡或浑浊。luma可能会提供更好的结果，因为它提取的是感知的而不是线性的亮度，例如greyscale('#0000ff')将返回与相同的值greyscale('#00ff00')，尽管它们在人眼看来亮度差异很大。

参数：color彩色对象。

返回值： color

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

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

80f20d ➜ 808080

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

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

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

输出： #cacaca

80f20d ➜ cacaca

这次，灰色的亮度看起来与绿色差不多，尽管它的值实际上更高。

对比

选择两种颜色中的哪一种提供最大的对比度。

这对于确保可在背景下读取颜色非常有用，对于可访问性合规性也很有用。该函数的工作方式与Compass for SASS中的对比函数相同。根据WCAG 2.0，使用经过伽玛校正的亮度值（而非亮度）比较颜色。

可以按任意顺序提供明暗参数-该函数将计算其亮度值并自动分配明暗，这意味着您不能通过颠倒顺序来使用此函数选择对比度最低的颜色。

参数：

  • color：要比较的颜色对象。
  • dark：可选-指定的深色（默认为黑色）。
  • light：可选-指定的浅色（默认为白色）。
  • threshold：可选-0-100％的百分比，指定从“暗”到“亮”的过渡位置（默认为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
}

这些示例将上面计算的颜色用于背景和前景。您可以看到，您永远不会以白底白字或黑底黑字告终，尽管可以使用阈值来允许较低对比度的结果，如上例所示：

000000 ffffff dddddd 000000 ffffff


色彩融合函数

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

乘

将两种颜色相乘。两种颜色中每种颜色的对应RGB通道相乘然后除以255。结果是颜色更深。

参数：

  • 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

屏幕

做相反的事情multiply。结果是颜色更亮。

参数：

  • 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 00ff00 ffff00

screen(#ff6600, #0000ff);

ff6600 0000ff ff66ff

覆盖

结合了的效果multiply和screen。有条件地使明亮的通道变亮，使黑暗的通道变暗。注意：条件的结果由第一个颜色参数确定。

参数：

  • 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

柔光

类似于overlay但避免纯黑色导致纯黑色，而纯白色导致纯白色。

参数：

  • 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

强光

相同，overlay但颜色角色相反。

参数：

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

hardlight(#ff6600, #ffffff);

ff6600 ffffff ffffff

hardlight(#ff6600, #ff0000);

ff6600 ff0000 ff0000

hardlight(#ff6600, #00ff00);

ff6600 00ff00 00ff00

hardlight(#ff6600, #0000ff);

ff6600 0000ff 0000ff

区别

在逐个通道的基础上从第一种颜色中减去第二种颜色。负值反转。减去黑色不会导致变化。减去白色会导致颜色反转。

参数：

  • 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

排除

difference与较低对比度类似的效果。

参数：

  • 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

平均

以每通道（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

否定

对...起到相反的作用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