函数

Less 支持的内置函数。

逻辑函数

编辑“logical-functions”的 markdown 源

if

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

参数

  • 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参数支持的布尔表达式与保护语句相同。

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

字符串函数

编辑“string-functions”的 markdown 源代码

escape

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

  • 以下字符不会被编码:,/?@&+'~!$
  • 最常见的编码字符是:\<space\>#^(){}|:><;][=

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

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

示例

escape('a=1')

输出

a%3D1

注释:如果参数不是字符串,则输出未定义。当前实现对颜色返回undefined,对任何其他类型的参数返回未更改的输入。不应依赖此行为,将来可能会更改。

e

字符串转义。

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

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

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

示例

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

输出

filter: ms:alwaysHasItsOwnSyntax.For.Stuff();

% 格式

函数 %(string, arguments ...) 格式化一个字符串。

第一个参数是带有占位符的字符串。所有占位符都以百分号符号 % 开头,后跟字母 sSdDaA。剩余参数包含替换占位符的表达式。如果您需要打印百分号符号,请使用另一个百分号 %% 对其进行转义。

如果您需要将特殊字符转义为其 utf-8 转义代码,请使用大写占位符。该函数转义除 ()'~! 之外的所有特殊字符。空格编码为 %20。小写占位符将特殊字符保留原样。

占位符

  • dDaA - 可以替换为任何类型的参数(颜色、数字、转义值、表达式等)。如果您将它们与字符串结合使用,则将使用整个字符串,包括其引号。但是,引号按原样放入字符串中,不会使用“/”或任何类似方式对其进行转义。
  • sS - 可以替换为任何表达式。如果您将其与字符串一起使用,则仅使用字符串值 - 省略引号。

参数

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

列表函数

编辑“list-functions”的 markdown 源代码

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 {
  // 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都不会被定义。

使用rangeeach创建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;
}

数学函数

编辑“math-functions”的 markdown 源代码

向上取整

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

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

平方根

计算一个数的平方根。保持单位不变。

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

余弦

计算余弦函数。

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

参数: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 和 π 之间的一个数字。

参数: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);

参数:

返回:number

示例

pi()

输出

3.141592653589793

pow

返回第一个参数乘以第二个参数的幂的值。

返回值具有与第一个参数相同的维度,而第二个参数的维度则被忽略。

参数

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


类型函数

编辑“type-functions”的 markdown 源代码

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

杂项函数

编辑 "misc-functions" 的 markdown 源

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 以在不转换的情况下更改单位。

兼容的单位组:

  • 长度:mcmmminptpc
  • 时间:sms
  • 角度:raddeggradturn

参数

  • number:带单位的浮点数。
  • identifierstringescaped value:单位

返回: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。

如果没有 mimetype,data-uri 函数会根据文件名后缀猜测 mimetype。文本和 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

仅在保护条件内可用,仅当没有其他 mixin 匹配时返回 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() 调用匹配时匹配

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

允许在同一保护条件中或具有相同名称的 mixin 的不同条件中进行多次 default() 调用

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

  .m(1); // OK
}

但是,如果 Less 检测到使用 default() 的多个 mixin 定义之间存在潜在冲突,它将抛出一个错误

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

unit

移除或更改尺寸的单位

参数

  • dimension:带或不带单位的数字。
  • unit:要更改到的单位(可选),如果省略,它将移除单位。

有关使用转换更改单位,请参见 convert

示例:unit(5, px)

输出:5px

示例:unit(5em)

输出:5

get-unit

返回数字的单位。

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

参数

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

示例:get-unit(5px)

输出:px

示例:get-unit(5)

输出://nothing

svg-gradient

生成多级 svg 渐变。

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

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

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

参数 - 列表中的颜色停止

  • 转义值标识符列表:方向
  • 列表 - 列表中的所有颜色及其位置

参数 - 参数中的颜色停止

  • 转义值标识符列表:方向
  • 颜色 [百分比]对:第一个颜色及其相对位置(位置可选)
  • 颜色 百分比对:第二个颜色及其相对位置(可选)
  • ...
  • 颜色 百分比对:第 n 个颜色及其相对位置(可选)
  • 颜色 [百分比]对:最后一个颜色及其相对位置(位置可选)

返回:带“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>

颜色定义函数

编辑“color-definition”的 markdown 源代码

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

从十进制红色、绿色、蓝色和 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 格式创建一个颜色的十六进制表示(不是 #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

从色调、饱和度、亮度和 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

从色调、饱和度和值 (HSV) 值创建一个不透明颜色对象。

请注意,这是一个在 Photoshop 中可用的颜色空间,与 hsl 不同。

参数

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

返回:color

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

输出:#408000

hsva

从色调、饱和度、值和 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)


颜色通道函数

编辑“color-channel”的 markdown 源代码

色调

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

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

返回:整数 0-360

示例:hue(hsl(90, 100%, 50%))

输出:90

饱和度

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

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

返回:百分比 0-100

示例:saturation(hsl(90, 100%, 50%))

输出:100%

亮度

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

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

返回:百分比 0-100

示例:lightness(hsl(90, 100%, 50%))

输出:50%

hsv 色调

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

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

返回:整数 0-360

示例:hsvhue(hsv(90, 100%, 50%))

输出:90

hsv 饱和度

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

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

返回:百分比 0-100

示例:hsvsaturation(hsv(90, 100%, 50%))

输出:100%

hsv 值

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

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

返回:百分比 0-100

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

输出:50%

红色

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

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

返回:浮点数 0-255

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

输出:10

green

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

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

返回:浮点数 0-255

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

输出:20

blue

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

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

返回:浮点数 0-255

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

输出:30

alpha

提取颜色对象的 alpha 通道。

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

返回:float 0-1

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

输出:0.5

luma

计算颜色对象的 亮度(感知亮度)。

使用 WCAG 2.0 中推荐的 SMPTE C / Rec. 709 系数。对比度函数中也使用了此计算。

在 v1.7.0 之前,亮度是在没有伽马校正的情况下计算的,使用亮度函数计算这些“旧”值。

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

返回:percentage 0-100%

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

输出:44%

luminance

计算没有伽马校正的亮度值(此函数在 v1.7.0 之前名为 luma

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

返回:percentage 0-100%

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

输出:65%


颜色运算函数

编辑“color-operations”的 markdown 源

颜色运算通常采用与它们正在更改的值相同的单位作为参数,并且将百分比作为绝对值处理,因此将 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%)

Color 1Color 2

desaturate

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

参数

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

返回:color

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

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

Color 1Color 2

lighten

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

参数

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

返回:color

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

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

Color 1Color 2

darken

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

参数

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

返回:color

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

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

Color 1Color 2

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)

旋转

按任意方向旋转颜色的色相角度。

虽然角度范围为 0-360,但它应用模 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%)

Color 1Color 2

Color 1Color 2

混合

按可变比例混合两种颜色。不透明度包含在计算中。

参数

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

Color 1 + Color 2Color 3

色调

按可变比例将颜色与白色混合。它与调用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);

Color 1Color 2

阴影

按可变比例将颜色与黑色混合。它与调用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);

Color 1Color 2

灰度

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

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

参数:color:颜色对象。

返回:color

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

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

Color 1Color 2

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

与使用luma进行比较(用法不同,因为luma返回单个值,而不是颜色)

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

输出:#cacaca

Color 1Color 2

这次,灰色的亮度看起来与绿色大致相同,尽管它的值实际上更高。

contrast

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

这对于确保颜色在背景下可读非常有用,这也对无障碍性合规性非常有用。此函数的工作方式与 SASS 中 Compass 的对比度函数 相同。根据 WCAG 2.0,颜色使用其伽马校正的 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
}

这些示例使用上面计算的颜色作为背景和前景;您会看到您永远不会得到白色背景上的白色或黑色背景上的黑色,尽管可以使用阈值来允许较低对比度的结果,如最后一个示例所示

Color 1 Color 1 Color 1 Color 1 Color 1


颜色混合函数

编辑 "color-blending" 的 markdown 源

这些操作类似于(但不一定完全相同)Photoshop、Fireworks 或 GIMP 等图像编辑器中发现的混合模式,因此您可以使用它们使 CSS 颜色与图像匹配。

multiply

将两种颜色相乘。两个颜色的相应 RGB 通道相乘,然后除以 255。结果是一种较暗的颜色。

参数

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

返回:color

示例:

multiply(#ff6600, #000000);

Color 1 Color 2 Color 3

multiply(#ff6600, #333333);

Color 1 Color 2 Color 3

multiply(#ff6600, #666666);

Color 1 Color 2 Color 3

multiply(#ff6600, #999999);

Color 1 Color 2 Color 3

multiply(#ff6600, #cccccc);

Color 1 Color 2 Color 3

multiply(#ff6600, #ffffff);

Color 1 Color 2 Color 3

multiply(#ff6600, #ff0000);

Color 1 Color 2 Color 3

multiply(#ff6600, #00ff00);

Color 1 Color 2 Color 3

multiply(#ff6600, #0000ff);

Color 1 Color 2 Color 3

滤色

multiply 相反。结果是一种较亮的颜色。

参数

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

返回:color

示例

screen(#ff6600, #000000);

Color 1 Color 2 Color 3

screen(#ff6600, #333333);

Color 1 Color 2 Color 3

screen(#ff6600, #666666);

Color 1 Color 2 Color 3

screen(#ff6600, #999999);

Color 1 Color 2 Color 3

screen(#ff6600, #cccccc);

Color 1 Color 2 Color 3

screen(#ff6600, #ffffff);

Color 1 Color 2 Color 3

screen(#ff6600, #ff0000);

Color 1 Color 2 Color 3

screen(#ff6600, #00ff00);

Color 1 Color 2 Color 3

screen(#ff6600, #0000ff);

Color 1 Color 2 Color 3

叠加

结合了 multiplyscreen 的效果。有条件地使亮通道变亮,使暗通道变暗。注意:条件的结果由第一个颜色参数决定。

参数

  • color1:一个基本颜色对象。也是决定结果变亮还是变暗的决定因素颜色。
  • color2:一个要叠加的颜色对象。

返回:color

示例

overlay(#ff6600, #000000);

Color 1 Color 2 Color 3

overlay(#ff6600, #333333);

Color 1 Color 2 Color 3

overlay(#ff6600, #666666);

Color 1 Color 2 Color 3

overlay(#ff6600, #999999);

Color 1 Color 2 Color 3

overlay(#ff6600, #cccccc);

Color 1 Color 2 Color 3

overlay(#ff6600, #ffffff);

Color 1 Color 2 Color 3

overlay(#ff6600, #ff0000);

Color 1 Color 2 Color 3

overlay(#ff6600, #00ff00);

Color 1 Color 2 Color 3

overlay(#ff6600, #0000ff);

Color 1 Color 2 Color 3

柔光

overlay 类似,但避免纯黑色导致纯黑色,纯白色导致纯白色。

参数

  • color1:一个用于柔光另一个的颜色对象。
  • color2:一个要被柔光的颜色对象。

返回:color

示例

softlight(#ff6600, #000000);

Color 1 Color 2 Color 3

softlight(#ff6600, #333333);

Color 1 Color 2 Color 3

softlight(#ff6600, #666666);

Color 1 Color 2 Color 3

softlight(#ff6600, #999999);

Color 1 Color 2 Color 3

softlight(#ff6600, #cccccc);

Color 1 Color 2 Color 3

softlight(#ff6600, #ffffff);

Color 1 Color 2 Color 3

softlight(#ff6600, #ff0000);

Color 1 Color 2 Color 3

softlight(#ff6600, #00ff00);

Color 1 Color 2 Color 3

softlight(#ff6600, #0000ff);

Color 1 Color 2 Color 3

强光

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

参数

  • color1:一个要叠加的颜色对象。
  • color2:一个基本颜色对象。也是决定结果变亮还是变暗的决定因素颜色。

返回:color

示例

hardlight(#ff6600, #000000);

Color 1 Color 2 Color 3

hardlight(#ff6600, #333333);

Color 1 Color 2 Color 3

hardlight(#ff6600, #666666);

Color 1 Color 2 Color 3

hardlight(#ff6600, #999999);

Color 1 Color 2 Color 3

hardlight(#ff6600, #cccccc);

Color 1 Color 2 Color 3

hardlight(#ff6600, #ffffff);

Color 1 Color 2 Color 3

hardlight(#ff6600, #ff0000);

Color 1 Color 2 Color 3

hardlight(#ff6600, #00ff00);

Color 1 Color 2 Color 3

hardlight(#ff6600, #0000ff);

Color 1 Color 2 Color 3

差值

逐通道从第一个颜色中减去第二个颜色。负值取反。减去黑色不会产生变化;减去白色会导致颜色反转。

参数

  • color1:一个用作被减数的颜色对象。
  • color2:一个用作减数的颜色对象。

返回:color

示例

difference(#ff6600, #000000);

Color 1 Color 2 Color 3

difference(#ff6600, #333333);

Color 1 Color 2 Color 3

difference(#ff6600, #666666);

Color 1 Color 2 Color 3

difference(#ff6600, #999999);

Color 1 Color 2 Color 3

difference(#ff6600, #cccccc);

Color 1 Color 2 Color 3

difference(#ff6600, #ffffff);

Color 1 Color 2 Color 3

difference(#ff6600, #ff0000);

Color 1 Color 2 Color 3

difference(#ff6600, #00ff00);

Color 1 Color 2 Color 3

difference(#ff6600, #0000ff);

Color 1 Color 2 Color 3

排除

difference 类似,但对比度较低。

参数

  • color1:一个用作被减数的颜色对象。
  • color2:一个用作减数的颜色对象。

返回:color

示例

exclusion(#ff6600, #000000);

Color 1 Color 2 Color 3

exclusion(#ff6600, #333333);

Color 1 Color 2 Color 3

exclusion(#ff6600, #666666);

Color 1 Color 2 Color 3

exclusion(#ff6600, #999999);

Color 1 Color 2 Color 3

exclusion(#ff6600, #cccccc);

Color 1 Color 2 Color 3

exclusion(#ff6600, #ffffff);

Color 1 Color 2 Color 3

exclusion(#ff6600, #ff0000);

Color 1 Color 2 Color 3

exclusion(#ff6600, #00ff00);

Color 1 Color 2 Color 3

exclusion(#ff6600, #0000ff);

Color 1 Color 2 Color 3

平均

按通道(RGB)计算两种颜色的平均值。

参数

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

返回:color

示例

average(#ff6600, #000000);

Color 1 Color 2 Color 3

average(#ff6600, #333333);

Color 1 Color 2 Color 3

average(#ff6600, #666666);

Color 1 Color 2 Color 3

average(#ff6600, #999999);

Color 1 Color 2 Color 3

average(#ff6600, #cccccc);

Color 1 Color 2 Color 3

average(#ff6600, #ffffff);

Color 1 Color 2 Color 3

average(#ff6600, #ff0000);

Color 1 Color 2 Color 3

average(#ff6600, #00ff00);

Color 1 Color 2 Color 3

average(#ff6600, #0000ff);

Color 1 Color 2 Color 3

取反

difference 相反的效果。

结果是一个更亮的色彩。注意相反 的效果并不意味着倒置的效果,后者是加法运算的结果。

参数

  • color1:一个用作被减数的颜色对象。
  • color2:一个用作减数的颜色对象。

返回:color

示例

negation(#ff6600, #000000);

Color 1 Color 2 Color 3

negation(#ff6600, #333333);

Color 1 Color 2 Color 3

negation(#ff6600, #666666);

Color 1 Color 2 Color 3

negation(#ff6600, #999999);

Color 1 Color 2 Color 3

negation(#ff6600, #cccccc);

Color 1 Color 2 Color 3

negation(#ff6600, #ffffff);

Color 1 Color 2 Color 3

negation(#ff6600, #ff0000);

Color 1 Color 2 Color 3

negation(#ff6600, #00ff00);

Color 1 Color 2 Color 3

negation(#ff6600, #0000ff);

Color 1 Color 2 Color 3