函数

Less 支持的内置函数。

逻辑函数

if

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

¥Returns one of two values depending on a condition.

参数:

¥Parameters:

  • condition:布尔表达式

    ¥condition: A boolean expression

  • value1:如果 condition 为真,则返回该值。

    ¥value1: A value returned if condition is true.

  • value2:如果 condition 不为真,则返回该值。

    ¥value2: A value returned if condition is not true.

发布于:v3.0.0 更新于:v3.6.0

¥Released: v3.0.0 Updated: v3.6.0

示例:

¥Examples:

@some: foo;

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

结果:

¥Result:

div {
    margin: 0;
    color:  black;
}

注意:conditional 参数支持的布尔表达式与 守卫声明 相同。

¥Notes: A boolean expression supported as the conditional parameter are the same as of Guard Statements.

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

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

¥Note: before Less 3.6, the condition required a set of parentheses.

if(2 > 1, blue, green);   // Causes an error in 3.0-3.5.3
if((2 > 1), blue, green); // Ok 3.6+

boolean

评估为真或假

¥Evaluates to true or false

你可以 "store" 布尔测试以供以后在守卫中进行评估或 if()

¥You can "store" a boolean test for later evaluation in a guard or if().

参数:

¥Parameters:

  • condition:布尔表达式

    ¥condition: A boolean expression

发布于:v3.0.0 更新于:v3.6.0

¥Released: v3.0.0 Updated: v3.6.0

示例:

¥Examples:

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

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

结果:

¥Result:

div {
  background: black;
  color: white;
}

字符串函数

escape

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

¥Applies URL-encoding to special characters found in the input string.

  • 这些字符未编码:,/?@&+'~!$

    ¥These characters are not encoded: ,, /, ?, @, &, +, ', ~, ! and $.

  • 最常见的编码字符是:\<space\>#^(){}|:><;][=

    ¥Most common encoded characters are: \<space\>, #, ^, (, ), {, }, |, :, >, <, ;, ], [ and =.

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

¥Parameters: string: a string to escape.

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

¥Returns: escaped string content without quotes.

示例:

¥Example:

escape('a=1')

输出:

¥Output:

a%3D1

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

¥Note: if the parameter is not a string, output is not defined. The current implementation returns undefined on color and unchanged input on any other kind of argument. This behavior should not be relied on and may change in the future.

e

字符串转义。

¥String escaping.

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

¥It expects string as a parameter and return its content as is, but without quotes. It can be used to output CSS value which is either not valid CSS syntax, or uses proprietary syntax which Less doesn't recognize.

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

¥Parameters: string - a string to escape.

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

¥Returns: string - the escaped string, without quotes.

示例:

¥Example:

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

输出:

¥Output:

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

% 格式

¥% format

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

¥The function %(string, arguments ...) formats a string.

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

¥The first argument is string with placeholders. All placeholders start with percentage symbol % followed by letter s,S,d,D,a, or A. Remaining arguments contain expressions to replace placeholders. If you need to print the percentage symbol, escape it by another percentage %%.

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

¥Use uppercase placeholders if you need to escape special characters into their utf-8 escape codes. The function escapes all special characters except ()'~!. Space is encoded as %20. Lowercase placeholders leave special characters as they are.

占位符:

¥Placeholders:

  • d, D, a, A - 可以替换为任何类型的参数(颜色、数字、转义值、表达式...)。如果将它们与字符串结合使用,则将使用整个字符串 - 包括它的引号。但是,引号按原样放置在字符串中,它们不会被 "/" 或类似的东西转义。

    ¥d, D, a, A - can be replaced by any kind of argument (color, number, escaped value, expression, ...). If you use them in combination with string, the whole string will be used - including its quotes. However, the quotes are placed into the string as they are, they are not escaped by "/" nor anything similar.

  • s, S - 可以用任何表达式替换。如果与字符串一起使用,则仅使用字符串值 - 引号被省略。

    ¥s, S - can be replaced by any expression. If you use it with string, only the string value is used - quotes are omitted.

参数:

¥Parameters:

  • string:带占位符的格式字符串,

    ¥string: format string with placeholders,

  • anything* :替换占位符的值。

    ¥anything* : values to replace placeholders.

返回:格式化 string

¥Returns: formatted string.

示例:

¥Example:

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

输出:

¥Output:

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

替换字符串中的文本。

¥Replaces a text within a string.

发布于 v1.7.0

¥Released v1.7.0

参数:

¥Parameters:

  • string:要搜索和替换的字符串。

    ¥string: The string to search and replace in.

  • pattern:要搜索的字符串或正则表达式模式。

    ¥pattern: A string or regular expression pattern to search for.

  • replacement:用于替换匹配模式的字符串。

    ¥replacement: The string to replace the matched pattern with.

  • flags:(可选)正则表达式标志。

    ¥flags: (Optional) regular expression flags.

返回:具有替换值的字符串。

¥Returns: a string with the replaced values.

示例:

¥Example:

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

结果:

¥Result:

"Hello, Earth!";
"2 + 2 = 4";
'This is a new string.';
bar-2;

列表函数

length

返回值列表中的元素数。

¥Returns the number of elements in a value list.

参数

¥Parameters

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

    ¥list - a comma or space separated list of values.

示例:length(1px solid #0080ff);

¥Example: length(1px solid #0080ff);

输出:3

¥Output: 3

示例:

¥Example:

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

输出:

¥Output:

n: 4;

extract

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

¥Returns the value at a specified position in a list.

参数

¥Parameters

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

    ¥list - a comma or space separated list of values.

  • index - 一个整数,指定要返回的列表元素的位置。

    ¥index - an integer that specifies a position of a list element to return.

示例:extract(8px dotted red, 2);

¥Example: extract(8px dotted red, 2);

输出:dotted

¥Output: dotted

示例:

¥Example:

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

输出:

¥Output:

value: coconut;

range

发布于 v3.9.0

¥Released v3.9.0

生成跨越一系列值的列表

¥Generate a list spanning a range of values

参数

¥Parameters

  • start - (可选)起始值例如 1 或 1 像素

    ¥start - (optional) The start value e.g. 1 or 1px

  • end - 最终值,例如 5px

    ¥end - The end value e.g. 5px

  • step - (可选)增加量

    ¥step - (optional) The amount to increment by

示例:

¥Examples:

value: range(4);

输出:

¥Outputs:

value: 1 2 3 4;

作用域内每个值的输出将与 end 值的单位相同。例如:

¥The output of each value in the range will be the same unit as the end value. For example:

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

输出:

¥Outputs:

value: 10px 20px 30px;

each

发布于 v3.7.0

¥Released v3.7.0

将规则集的评估绑定到列表的每个成员。

¥Bind the evaluation of a ruleset to each member of a list.

参数

¥Parameters

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

    ¥list - a comma or space separated list of values.

  • rules - 匿名规则集/混入

    ¥rules - An anonymous ruleset/mixin

示例:

¥Example:

@selectors: blue, green, red;

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

输出:

¥Outputs:

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

默认情况下,每个规则集按列表成员绑定到 @value@key@index 变量。对于大多数列表,@key@index 将被分配相同的值(数字位置,从 1 开始)。但是,你也可以将规则集本身用作结构化列表。如:

¥By default, each ruleset is bound, per list member, to a @value, @key, and @index variable. For most lists, @key and @index will be assigned the same value (numerical position, 1-based). However, you can also use rulesets themselves as structured lists. As in:


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

这将输出:

¥This will output:

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

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

¥Since you can, of course, call mixins with guards for each ruleset call, this makes each() a very powerful function.

each() 中设置变量名称

¥Setting variable names in each()

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

¥You don't have to use @value, @key, and @index in your each() function. In Less 3.7, with the each() function, Less is introducing the concept of anonymous mixins, which may expand to other parts of the syntax at a later date.

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

¥An anonymous mixin uses the form of #() or .() starting with . or # just like a regular mixin would. In each(), you can use it like this:

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

如预期的那样输出:

¥This outputs, as expected:

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

each() 函数将采用匿名混合中定义的变量名称,并将它们按顺序绑定到 @value@key@index 值。如果你只写 each(@list, #(@value) {}),那么 @key@index 都不会被定义。

¥The each() function will take the variable names defined in the anonymous mixin and bind them to the @value, @key and @index values, in that order. If you only write each(@list, #(@value) {}), then neither @key nor @index will be defined.

使用 rangeeach 创建 for 循环

¥Creating a for loop using range and each

需要更少 v3.9.0

¥Requires Less v3.9.0

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

¥You can emulate a for loop simply by generating a numerical list and using each to expand it to a ruleset.

示例:

¥Example:

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

输出:

¥Outputs:

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

数学函数

ceil

四舍五入到下一个最高整数。

¥Rounds up to the next highest integer.

参数:number - 一个浮点数。

¥Parameters: number - a floating point number.

返回:integer

¥Returns: integer

示例:ceil(2.4)

¥Example: ceil(2.4)

输出:3

¥Output: 3

floor

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

¥Rounds down to the next lowest integer.

参数:number - 一个浮点数。

¥Parameters: number - a floating point number.

返回:integer

¥Returns: integer

示例:floor(2.6)

¥Example: floor(2.6)

输出:2

¥Output: 2

percentage

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

¥Converts a floating point number into a percentage string.

参数:number - 一个浮点数。

¥Parameters: number - a floating point number.

返回:number

¥Returns: number

示例:percentage(0.5)

¥Example: percentage(0.5)

输出:50%

¥Output: 50%

round

应用舍入。

¥Applies rounding.

参数:

¥Parameters:

  • number:一个浮点数。

    ¥number: A floating point number.

  • decimalPlaces:可选的:要四舍五入的小数位数。默认为 0。

    ¥decimalPlaces: Optional: The number of decimal places to round to. Defaults to 0.

返回:number

¥Returns: number

示例:round(1.67)

¥Example: round(1.67)

输出:2

¥Output: 2

示例:round(1.67, 1)

¥Example: round(1.67, 1)

输出:1.7

¥Output: 1.7

sqrt

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

¥Calculates square root of a number. Keeps units as they are.

参数:number - 浮点数。

¥Parameters: number - floating point number.

返回:number

¥Returns: number

示例:

¥Example:

sqrt(25cm)

输出:

¥Output:

5cm

示例:

¥Example:

sqrt(18.6%)

输出:

¥Output:

4.312771730569565%;

abs

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

¥Calculates absolute value of a number. Keeps units as they are.

参数:number - 一个浮点数。

¥Parameters: number - a floating point number.

返回:number

¥Returns: number

示例 #1:abs(25cm)

¥Example #1: abs(25cm)

输出:25cm

¥Output: 25cm

示例 #2:abs(-18.6%)

¥Example #2: abs(-18.6%)

输出:18.6%;

¥Output: 18.6%;

sin

计算正弦函数。

¥Calculates sine function.

假定没有单位的数字的弧度。

¥Assumes radians on numbers without units.

参数:number - 一个浮点数。

¥Parameters: number - a floating point number.

返回:number

¥Returns: number

示例:

¥Example:

sin(1); // sine of 1 radian
sin(1deg); // sine of 1 degree
sin(1grad); // sine of 1 gradian

输出:

¥Output:

0.8414709848078965; // sine of 1 radian
0.01745240643728351; // sine of 1 degree
0.015707317311820675; // sine of 1 gradian

asin

计算反正弦(正弦的倒数)函数。

¥Calculates arcsine (inverse of sine) function.

以弧度返回数字,例如 -π/2π/2 之间的数字。

¥Returns number in radians e.g. a number between -π/2 and π/2.

参数:number - 来自 [-1, 1] 区间的浮点数。

¥Parameters: number - floating point number from [-1, 1] interval.

返回:number

¥Returns: number

示例:

¥Example:

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

输出:

¥Output:

-1rad
0rad
NaNrad

cos

计算余弦函数。

¥Calculates cosine function.

假定没有单位的数字的弧度。

¥Assumes radians on numbers without units.

参数:number - 一个浮点数。

¥Parameters: number - a floating point number.

返回:number

¥Returns: number

示例:

¥Example:

cos(1) // cosine of 1 radian
cos(1deg) // cosine of 1 degree
cos(1grad) // cosine of 1 gradian

输出:

¥Output:

0.5403023058681398 // cosine of 1 radian
0.9998476951563913 // cosine of 1 degree
0.9998766324816606 // cosine of 1 gradian

acos

计算反余弦(余弦的倒数)函数。

¥Calculates arccosine (inverse of cosine) function.

返回以弧度表示的数字,例如 0 到 π 之间的数字。

¥Returns number in radians e.g. a number between 0 and π.

参数:number - 来自 [-1, 1] 区间的浮点数。

¥Parameters: number - a floating point number from [-1, 1] interval.

返回:number

¥Returns: number

示例:

¥Example:

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

输出:

¥Output:

1rad
0rad
NaNrad

tan

计算正切函数。

¥Calculates tangent function.

假定没有单位的数字的弧度。

¥Assumes radians on numbers without units.

参数:number - 一个浮点数。

¥Parameters: number - a floating point number.

返回:number

¥Returns: number

示例:

¥Example:

tan(1) // tangent of 1 radian
tan(1deg) // tangent of 1 degree
tan(1grad) // tangent of 1 gradian

输出:

¥Output:

1.5574077246549023   // tangent of 1 radian
0.017455064928217585 // tangent of 1 degree
0.015709255323664916 // tangent of 1 gradian

atan

计算反正切(正切的倒数)函数。

¥Calculates arctangent (inverse of tangent) function.

以弧度返回数字,例如 -π/2π/2 之间的数字。

¥Returns number in radians e.g. a number between -π/2 and π/2.

参数:number - 一个浮点数。

¥Parameters: number - a floating point number.

返回:number

¥Returns: number

示例:

¥Example:

atan(-1.5574077246549023)
atan(0)
round(atan(22), 6) // arctangent of 22 rounded to 6 decimal places

输出:

¥Output:

-1rad
0rad
1.525373rad;

pi

返回π(pi);

¥Returns π (pi);

参数:none

¥Parameters: none

返回:number

¥Returns: number

示例:

¥Example:

pi()

输出:

¥Output:

3.141592653589793

pow

返回第一个参数的第二个参数次方的值。

¥Returns the value of the first argument raised to the power of the second argument.

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

¥Returned value has the same dimension as the first parameter and the dimension of the second parameter is ignored.

参数:

¥Parameters:

  • number:base - 浮点数。

    ¥number: base -a floating point number.

  • number:exponent - 一个浮点数。

    ¥number: exponent - a floating point number.

返回:number

¥Returns: number

示例:

¥Example:

pow(0cm, 0px)
pow(25, -2)
pow(25, 0.5)
pow(-25, 0.5)
pow(-25%, -0.5)

输出:

¥Output:

1cm
0.0016
5
NaN
NaN%

mod

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

¥Returns the value of the first argument modulus second argument.

返回值与第一个参数具有相同的维度,第二个参数的维度被忽略。该函数还能够处理负数和浮点数。

¥Returned value has the same dimension as the first parameter, the dimension of the second parameter is ignored. The function is able to handle also negative and floating point numbers.

参数:

¥Parameters:

  • number:一个浮点数。

    ¥number: a floating point number.

  • number:一个浮点数。

    ¥number: a floating point number.

返回:number

¥Returns: number

示例:

¥Example:

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

输出:

¥Output:

NaNcm;
5cm
-1%;

min

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

¥Returns the lowest of one or more values.

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

¥Parameters: value1, ..., valueN - one or more values to compare.

返回:最低值。

¥Returns: the lowest value.

示例:min(5, 10);

¥Example: min(5, 10);

输出:5

¥Output: 5

示例:min(3px, 42px, 1px, 16px);

¥Example: min(3px, 42px, 1px, 16px);

输出:1px

¥Output: 1px

max

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

¥Returns the highest of one or more values.

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

¥Parameters: value1, ..., valueN - one or more values to compare.

返回:最高值。

¥Returns: the highest value.

示例:max(5, 10);

¥Example: max(5, 10);

输出:10

¥Output: 10

示例:max(3%, 42%, 1%, 16%);

¥Example: max(3%, 42%, 1%, 16%);

输出:42%

¥Output: 42%


类型函数

isnumber

如果值是数字,则返回 true,否则返回 false

¥Returns true if a value is a number, false otherwise.

参数:value - 正在评估的值或变量。

¥Parameters: value - a value or variable being evaluated.

返回:如果值为数字,则为 true,否则为 false

¥Returns: true if value is a number, false otherwise.

示例:

¥Example:

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

¥Returns true if a value is a string, false otherwise.

参数:value - 正在评估的值或变量。

¥Parameters: value - a value or variable being evaluated.

返回:如果值是字符串,则为 true,否则为 false

¥Returns: true if value is a string, false otherwise.

示例:

¥Example:

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

¥Returns true if a value is a color, false otherwise.

参数:value - 正在评估的值或变量。

¥Parameters: value - a value or variable being evaluated.

返回:如果值是颜色,则为 true,否则为 false

¥Returns: true if value is a color, false otherwise.

示例:

¥Example:

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

¥Returns true if a value is a keyword, false otherwise.

参数:value - 正在评估的值或变量。

¥Parameters: value - a value or variable being evaluated.

返回:如果值是关键字,则为 true,否则为 false

¥Returns: true if value is a keyword, false otherwise.

示例:

¥Example:

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

¥Returns true if a value is a url, false otherwise.

参数:value - 正在评估的值或变量。

¥Parameters: value - a value or variable being evaluated.

返回:如果值是 url,则为 true,否则为 false

¥Returns: true if value is a url, false otherwise.

示例:

¥Example:

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

¥Returns true if a value is a number in pixels, false otherwise.

参数:value - 正在评估的值或变量。

¥Parameters: value - a value or variable being evaluated.

返回:如果值是像素,则为 true,否则为 false

¥Returns: true if value is a pixel, false otherwise.

示例:

¥Example:

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

¥Returns true if a value is an em value, false otherwise.

参数:value - 正在评估的值或变量。

¥Parameters: value - a value or variable being evaluated.

返回:如果值为 em 值则为 true,否则为 false

¥Returns: true if value is an em value, false otherwise.

示例:

¥Example:

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

¥Returns true if a value is a percentage value, false otherwise.

参数:value - 正在评估的值或变量。

¥Parameters: value - a value or variable being evaluated.

返回:如果值是百分比值,则为 true,否则为 false

¥Returns: true if value is a percentage value, false otherwise.

示例:

¥Example:

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

¥Returns true if a value is a number in specified units, false otherwise.

参数:

¥Parameters:

  • value - 正在评估的值或变量。

    ¥value - a value or variable being evaluated.

  • unit - 要测试的单元标识符(可选地引用)。

    ¥unit - a unit identifier (optionally quoted) to test for.

返回:如果值是指定单位的数字,则为 true,否则为 false

¥Returns: true if value is a number in specified units, false otherwise.

示例:

¥Example:

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

¥Returns true if a value is a ruleset, false otherwise.

参数:

¥Parameters:

  • value - 正在评估的变量。

    ¥value - a variable being evaluated.

返回:如果值是规则集则为 true,否则为 false

¥Returns: true if value is a ruleset, false otherwise.

示例:

¥Example:

@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

¥Released v4.0.0

如果定义了变量,则返回 true,否则返回 false

¥Returns true if a variable is defined, false otherwise.

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

¥Parameters: variable - a variable being evaluated.

示例:

¥Example:

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

杂项函数

color

解析颜色,因此表示颜色的字符串成为颜色。

¥Parses a color, so a string representing a color becomes a color.

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

¥Parameters: string: a string of the specified color.

返回:color

¥Returns: color

示例:color("#aaa");

¥Example: color("#aaa");

输出:#aaa

¥Output: #aaa

image-size

从文件中获取图片尺寸。

¥Gets the image dimensions from a file.

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

¥Parameters: string: the file to get the dimensions for.

返回:dimension

¥Returns: dimension

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

¥Example: image-size("file.png");

输出:10px 10px

¥Output: 10px 10px

注意:这个功能需要每个环境都实现。它目前仅在节点环境中可用。

¥Note: this function needs to be implemented by each environment. It is currently only available in the node environment.

添加于:v2.2.0

¥Added in: v2.2.0

image-width

从文件中获取图片宽度。

¥Gets the image width from a file.

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

¥Parameters: string: the file to get the dimensions for.

返回:dimension

¥Returns: dimension

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

¥Example: image-width("file.png");

输出:10px

¥Output: 10px

注意:这个功能需要每个环境都实现。它目前仅在节点环境中可用。

¥Note: this function needs to be implemented by each environment. It is currently only available in the node environment.

添加于:v2.2.0

¥Added in: v2.2.0

image-height

从文件中获取图片高度。

¥Gets the image height from a file.

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

¥Parameters: string: the file to get the dimensions for.

返回:dimension

¥Returns: dimension

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

¥Example: image-height("file.png");

输出:10px

¥Output: 10px

注意:这个功能需要每个环境都实现。它目前仅在节点环境中可用。

¥Note: this function needs to be implemented by each environment. It is currently only available in the node environment.

添加于:v2.2.0

¥Added in: v2.2.0

convert

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

¥Convert a number from one unit into another.

第一个参数包含带有单位的数字,第二个参数包含单位。如果单位兼容,则转换数字。如果它们不兼容,则第一个参数不加修改地返回。

¥The first argument contains a number with units and second argument contains units. If the units are compatible, the number is converted. If they are not compatible, the first argument is returned unmodified.

参见 unit 了解如何在不转换的情况下更改单位。

¥See unit for changing the unit without conversion.

兼容的单位组:

¥Compatible unit groups:

  • 长度:mcmmminptpc

    ¥lengths: m, cm, mm, in, pt and pc,

  • 时间:sms

    ¥time: s and ms,

  • 角度:raddeggradturn

    ¥angle: rad, deg, grad and turn.

参数:

¥Parameters:

  • number:带单位的浮点数。

    ¥number: a floating point number with units.

  • identifierstringescaped value:单位

    ¥identifier, string or escaped value: units

返回:number

¥Returns: number

示例:

¥Example:

convert(9s, "ms")
convert(14cm, mm)
convert(8, mm) // incompatible unit types

输出:

¥Output:

9000ms
140mm
8

data-uri

如果 ieCompat 选项打开且资源太大,或者如果你在浏览器中使用该功能,则内联资源并回退到 url()。如果未给出 MIME 类型,则节点使用 mime 包来确定正确的 mime 类型。

¥Inlines a resource and falls back to url() if the ieCompat option is on and the resource is too large, or if you use the function in the browser. If the MIME type is not given then node uses the mime package to determine the correct mime type.

参数:

¥Parameters:

  • mimetype:(可选)MIME 类型字符串。

    ¥mimetype: (Optional) A MIME type string.

  • url:要内联的文件的 URL。

    ¥url: The URL of the file to inline.

如果没有 mimetype,data-uri 函数从文件名后缀猜测它。文本和 svg 文件编码为 utf-8,其他任何内容都编码为 base64。

¥If there is no mimetype, data-uri function guesses it from filename suffix. Text and svg files are encoded as utf-8 and anything else is encoded as base64.

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

¥If user provided mimetype, the function uses base64 if mimetype argument ends with ;base64. For example, image/jpeg;base64 is encoded into base64 while text/html is encoded into utf-8.

示例:data-uri('../data/image.jpg');

¥Example: data-uri('../data/image.jpg');

输出:url('data:image/jpeg;base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg==');

¥Output: url('data:image/jpeg;base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg==');

浏览器输出:url('../data/image.jpg');

¥Output in browser: url('../data/image.jpg');

示例:data-uri('image/jpeg;base64', '../data/image.jpg');

¥Example: data-uri('image/jpeg;base64', '../data/image.jpg');

输出:url('data:image/jpeg;base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg==');

¥Output: url('data:image/jpeg;base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg==');

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

¥Example: 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");

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

default

仅在守卫条件内可用,仅当没有其他 mixin 匹配时才返回 true,否则返回 false

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

示例:

¥Example:

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

div {
  .mixin(3);
}

div.special {
  .mixin(1);
}

输出:

¥Output:

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

可以将 default 返回的值与守卫运算符一起使用。例如,仅当至少有一个 matches.mixin() 调用的 mixin 定义时,.mixin() when not(default()) {} 才会匹配:

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

结果:

¥result:

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

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

¥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
}

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

¥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
}

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

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

高级多个 default() 用法:

¥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')}
}

结果:

¥Result:

.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 值:

¥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:

示例:

¥Example:

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

结果:

¥Result:

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

unit

删除或更改维度的单位

¥Remove or change the unit of a dimension

参数:

¥Parameters:

  • dimension:一个数字,有或没有维度。

    ¥dimension: A number, with or without a dimension.

  • unit:(可选)要更改为的单位,或者如果省略,它将删除该单位。

    ¥unit: (Optional) the unit to change to, or if omitted it will remove the unit.

请参阅 convert 了解如何通过换算更改单位。

¥See convert for changing the unit with conversion.

示例:unit(5, px)

¥Example: unit(5, px)

输出:5px

¥Output: 5px

示例:unit(5em)

¥Example: unit(5em)

输出:5

¥Output: 5

get-unit

返回数字的单位。

¥Returns units of a number.

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

¥If the argument contains a number with units, the function returns its units. The argument without units results in an empty return value.

参数:

¥Parameters:

  • number:有或没有单位的数字。

    ¥number: a number with or without units.

示例:get-unit(5px)

¥Example: get-unit(5px)

输出:px

¥Output: px

示例:get-unit(5)

¥Example: get-unit(5)

输出://nothing

¥Output: //nothing

svg-gradient

生成多站 svg 渐变。

¥Generates multi-stop svg gradients.

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

¥Svg-gradient function generates multi-stop svg gradients. It must have at least three parameters. First parameter specifies gradient type and direction and remaining parameters list colors and their positions. The position of first and last specified color are optional, remaining colors must have positions specified.

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

¥The direction must be one of to bottom, to right, to bottom right, to top right, ellipse or ellipse at center. The direction can be specified as both escaped value ~'to bottom' and space separated list of words to bottom.

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

¥The direction must be followed by two or more color stops. They can be supplied either inside a list or you can specify each color stops in separate argument.

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

¥Parameters - colors stops in list:

  • escaped valuelist of identifiers:方向

    ¥escaped value or list of identifiers: direction

  • list - 所有颜色及其在列表中的位置

    ¥list - all colors and their positions in list

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

¥Parameters - color stops in arguments:

  • escaped valuelist of identifiers:方向

    ¥escaped value or list of identifiers: direction

  • color [percentage] 对:第一种颜色及其相对位置(位置是可选的)

    ¥color [percentage] pair: first color and its relative position (position is optional)

  • color percent 对:(可选)第二种颜色及其相对位置

    ¥color percent pair: (optional) second color and its relative position

  • ...

  • color percent 对:(可选)第 n 种颜色及其相对位置

    ¥color percent pair: (optional) n-th color and its relative position

  • color [percentage] 对:最后一种颜色及其相对位置(位置是可选的)

    ¥color [percentage] pair: last color and its relative position (position is optional)

返回:url 与 "URI 编码" svg 渐变。

¥Returns: url with "URI-Encoded" svg gradient.

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

¥Example - colors stops in list:

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

equivalent - 颜色在参数中停止:

¥equivalent - color stops in arguments:

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

两者都会导致:

¥both result in:

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 编码的。

¥Note: in versions before 2.2.0 the result is base64 encoded .

生成的背景图片左侧为红色,其宽度的 30% 为绿色,最后为蓝色。Base64 编码部分包含以下 svg-gradient:

¥Generated background image has red color on the left, green at 30% of its width and ends with a blue color. Base64 encoded part contains following 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>

颜色定义函数

rgb

从十进制红色、绿色和蓝色 (RGB) 值创建不透明颜色对象。

¥Creates an opaque color object from decimal red, green and blue (RGB) values.

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

¥Literal color values in standard HTML/CSS formats may also be used to define colors, for example #ff0000.

参数:

¥Parameters:

  • red:整数 0-255 或百分比 0-100%。

    ¥red: An integer 0-255 or percentage 0-100%.

  • green:整数 0-255 或百分比 0-100%。

    ¥green: An integer 0-255 or percentage 0-100%.

  • blue:整数 0-255 或百分比 0-100%。

    ¥blue: An integer 0-255 or percentage 0-100%.

返回:color

¥Returns: color

示例:rgb(90, 129, 32)

¥Example: rgb(90, 129, 32)

输出:#5a8120

¥Output: #5a8120

rgba

从十进制红色、绿色、蓝色和 alpha (RGBA) 值创建透明颜色对象。

¥Creates a transparent color object from decimal red, green, blue and alpha (RGBA) values.

参数:

¥Parameters:

  • red:整数 0-255 或百分比 0-100%。

    ¥red: An integer 0-255 or percentage 0-100%.

  • green:整数 0-255 或百分比 0-100%。

    ¥green: An integer 0-255 or percentage 0-100%.

  • blue:整数 0-255 或百分比 0-100%。

    ¥blue: An integer 0-255 or percentage 0-100%.

  • alpha:数字 0-1 或百分比 0-100%。

    ¥alpha: A number 0-1 or percentage 0-100%.

返回:color

¥Returns: color

示例:rgba(90, 129, 32, 0.5)

¥Example: rgba(90, 129, 32, 0.5)

输出:rgba(90, 129, 32, 0.5)

¥Output: rgba(90, 129, 32, 0.5)

argb

创建 #AARRGGBB 格式的颜色的十六进制表示(不是 #RRGGBBAA!)。

¥Creates a hex representation of a color in #AARRGGBB format (NOT #RRGGBBAA!).

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

¥This format is used in Internet Explorer, and .NET and Android development.

参数:color,颜色对象。

¥Parameters: color, color object.

返回:string

¥Returns: string

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

¥Example: argb(rgba(90, 23, 148, 0.5));

输出:#805a1794

¥Output: #805a1794

hsl

根据色调、饱和度和亮度 (HSL) 值创建不透明颜色对象。

¥Creates an opaque color object from hue, saturation and lightness (HSL) values.

参数:

¥Parameters:

  • hue:表示度数的整数 0-360。

    ¥hue: An integer 0-360 representing degrees.

  • saturation:百分比 0-100% 或数字 0-1。

    ¥saturation: A percentage 0-100% or number 0-1.

  • lightness:百分比 0-100% 或数字 0-1。

    ¥lightness: A percentage 0-100% or number 0-1.

返回:color

¥Returns: color

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

¥Example: hsl(90, 100%, 50%)

输出:#80ff00

¥Output: #80ff00

如果你想基于另一种颜色的通道创建新颜色,这将很有用,例如:@new: hsl(hue(@old), 45%, 90%);

¥This is useful if you want to create a new color based on another color's channel, forExample: @new: hsl(hue(@old), 45%, 90%);

@new 将具有 @old 的色调,以及它自己的饱和度和亮度。

¥@new will have @old's hue, and its own saturation and lightness.

hsla

从色调、饱和度、亮度和 alpha (HSLA) 值创建透明颜色对象。

¥Creates a transparent color object from hue, saturation, lightness and alpha (HSLA) values.

参数:

¥Parameters:

  • hue:表示度数的整数 0-360。

    ¥hue: An integer 0-360 representing degrees.

  • saturation:百分比 0-100% 或数字 0-1。

    ¥saturation: A percentage 0-100% or number 0-1.

  • lightness:百分比 0-100% 或数字 0-1。

    ¥lightness: A percentage 0-100% or number 0-1.

  • alpha:百分比 0-100% 或数字 0-1。

    ¥alpha: A percentage 0-100% or number 0-1.

返回:color

¥Returns: color

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

¥Example: hsla(90, 100%, 50%, 0.5)

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

¥Output: rgba(128, 255, 0, 0.5)

hsv

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

¥Creates an opaque color object from hue, saturation and value (HSV) values.

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

¥Note that this is a color space available in Photoshop, and is not the same as hsl.

参数:

¥Parameters:

  • hue:表示度数的整数 0-360。

    ¥hue: An integer 0-360 representing degrees.

  • saturation:百分比 0-100% 或数字 0-1。

    ¥saturation: A percentage 0-100% or number 0-1.

  • value:百分比 0-100% 或数字 0-1。

    ¥value: A percentage 0-100% or number 0-1.

返回:color

¥Returns: color

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

¥Example: hsv(90, 100%, 50%)

输出:#408000

¥Output: #408000

hsva

从色调、饱和度、明度和 alpha (HSVA) 值创建透明颜色对象。

¥Creates a transparent color object from hue, saturation, value and alpha (HSVA) values.

请注意,这与 hsla 不同,它是 Photoshop 中可用的色彩空间。

¥Note that this is not the same as hsla, and is a color space available in Photoshop.

参数:

¥Parameters:

  • hue:表示度数的整数 0-360。

    ¥hue: An integer 0-360 representing degrees.

  • saturation:百分比 0-100% 或数字 0-1。

    ¥saturation: A percentage 0-100% or number 0-1.

  • value:百分比 0-100% 或数字 0-1。

    ¥value: A percentage 0-100% or number 0-1.

  • alpha:百分比 0-100% 或数字 0-1。

    ¥alpha: A percentage 0-100% or number 0-1.

返回:color

¥Returns: color

示例:hsva(90, 100%, 50%, 0.5)

¥Example: hsva(90, 100%, 50%, 0.5)

输出:rgba(64, 128, 0, 0.5)

¥Output: rgba(64, 128, 0, 0.5)


颜色通道函数

hue

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

¥Extracts the hue channel of a color object in the HSL color space.

参数:color - 颜色对象。

¥Parameters: color - a color object.

返回:integer 0-360

¥Returns: integer 0-360

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

¥Example: hue(hsl(90, 100%, 50%))

输出:90

¥Output: 90

saturation

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

¥Extracts the saturation channel of a color object in the HSL color space.

参数:color - 颜色对象。

¥Parameters: color - a color object.

返回:percentage 0-100

¥Returns: percentage 0-100

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

¥Example: saturation(hsl(90, 100%, 50%))

输出:100%

¥Output: 100%

lightness

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

¥Extracts the lightness channel of a color object in the HSL color space.

参数:color - 颜色对象。

¥Parameters: color - a color object.

返回:percentage 0-100

¥Returns: percentage 0-100

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

¥Example: lightness(hsl(90, 100%, 50%))

输出:50%

¥Output: 50%

hsvhue

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

¥Extracts the hue channel of a color object in the HSV color space.

参数:color - 颜色对象。

¥Parameters: color - a color object.

返回:integer 0-360

¥Returns: integer 0-360

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

¥Example: hsvhue(hsv(90, 100%, 50%))

输出:90

¥Output: 90

hsvsaturation

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

¥Extracts the saturation channel of a color object in the HSV color space.

参数:color - 颜色对象。

¥Parameters: color - a color object.

返回:percentage 0-100

¥Returns: percentage 0-100

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

¥Example: hsvsaturation(hsv(90, 100%, 50%))

输出:100%

¥Output: 100%

hsvvalue

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

¥Extracts the value channel of a color object in the HSV color space.

参数:color - 颜色对象。

¥Parameters: color - a color object.

返回:percentage 0-100

¥Returns: percentage 0-100

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

¥Example: hsvvalue(hsv(90, 100%, 50%))

输出:50%

¥Output: 50%

red

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

¥Extracts the red channel of a color object.

参数:color - 颜色对象。

¥Parameters: color - a color object.

返回:float 0-255

¥Returns: float 0-255

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

¥Example: red(rgb(10, 20, 30))

输出:10

¥Output: 10

green

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

¥Extracts the green channel of a color object.

参数:color - 颜色对象。

¥Parameters: color - a color object.

返回:float 0-255

¥Returns: float 0-255

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

¥Example: green(rgb(10, 20, 30))

输出:20

¥Output: 20

blue

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

¥Extracts the blue channel of a color object.

参数:color - 颜色对象。

¥Parameters: color - a color object.

返回:float 0-255

¥Returns: float 0-255

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

¥Example: blue(rgb(10, 20, 30))

输出:30

¥Output: 30

alpha

提取颜色对象的 alpha 通道。

¥Extracts the alpha channel of a color object.

参数:color - 颜色对象。

¥Parameters: color - a color object.

返回:float 0-1

¥Returns: float 0-1

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

¥Example: alpha(rgba(10, 20, 30, 0.5))

输出:0.5

¥Output: 0.5

luma

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

¥Calculates the luma (perceptual brightness) of a color object.

使用 SMPTE C/Rec.709 系数,如 WCAG 2.0 中所建议。该计算也用于对比函数。

¥Uses SMPTE C / Rec. 709 coefficients, as recommended in WCAG 2.0. This calculation is also used in the contrast function.

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

¥Before v1.7.0 the luma was calculated without gamma correction, use the luminance function to calculate these "old" values.

参数:color - 颜色对象。

¥Parameters: color - a color object.

返回:percentage 0-100%

¥Returns: percentage 0-100%

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

¥Example: luma(rgb(100, 200, 30))

输出:44%

¥Output: 44%

luminance

计算没有 gamma 校正的 luma 值(此函数在 v1.7.0 之前被命名为 luma

¥Calculates the value of the luma without gamma correction (this function was named luma before v1.7.0)

参数:color - 颜色对象。

¥Parameters: color - a color object.

返回:percentage 0-100%

¥Returns: percentage 0-100%

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

¥Example: luminance(rgb(100, 200, 30))

输出:65%

¥Output: 65%


颜色运算函数

颜色操作通常采用与它们正在更改的值相同的单位的参数,并且百分比作为绝对值处理,因此将 10% 的值增加 10% 会导致 20%。将选项方法参数设置为 relative 以获得相对百分比。当使用相对百分比时,将 10% 的值增加 10% 会导致 11%。值被限制在允许的作用域内;他们不环绕。在显示返回值的地方,除了你通常会使用的十六进制版本之外,我们还使用了使每个函数的功能一目了然的格式。

¥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%. Set the option method parameter to relative for relative percentages. When using relative percentages increasing a 10% value by 10% results in 11%. 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

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

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

参数:

¥Parameters:

  • color:颜色对象。

    ¥color: A color object.

  • amount:百分比 0-100%。

    ¥amount: A percentage 0-100%.

  • method:可选,设置为 relative 以相对于当前值进行调整。

    ¥method: Optional, set to relative for the adjustment to be relative to the current value.

返回:color

¥Returns: color

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

¥Example: saturate(hsl(90, 80%, 50%), 20%)

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

¥Output: #80ff00 // hsl(90, 100%, 50%)

Color 1

Color 2

desaturate

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

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

参数:

¥Parameters:

  • color:颜色对象。

    ¥color: A color object.

  • amount:百分比 0-100%。

    ¥amount: A percentage 0-100%.

  • method:可选,设置为 relative 以相对于当前值进行调整。

    ¥method: Optional, set to relative for the adjustment to be relative to the current value.

返回:color

¥Returns: color

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

¥Example: desaturate(hsl(90, 80%, 50%), 20%)

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

¥Output: #80cc33 // hsl(90, 60%, 50%)

Color 1

Color 2

lighten

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

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

参数:

¥Parameters:

  • color:颜色对象。

    ¥color: A color object.

  • amount:百分比 0-100%。

    ¥amount: A percentage 0-100%.

  • method:可选,设置为 relative 以相对于当前值进行调整。

    ¥method: Optional, set to relative for the adjustment to be relative to the current value.

返回:color

¥Returns: color

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

¥Example: lighten(hsl(90, 80%, 50%), 20%)

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

¥Output: #b3f075 // hsl(90, 80%, 70%)

Color 1

Color 2

darken

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

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

参数:

¥Parameters:

  • color:颜色对象。

    ¥color: A color object.

  • amount:百分比 0-100%。

    ¥amount: A percentage 0-100%.

  • method:可选,设置为 relative 以相对于当前值进行调整。

    ¥method: Optional, set to relative for the adjustment to be relative to the current value.

返回:color

¥Returns: color

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

¥Example: darken(hsl(90, 80%, 50%), 20%)

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

¥Output: #4d8a0f // hsl(90, 80%, 30%)

Color 1

Color 2

fadein

降低颜色的透明度(或增加不透明度),使其更不透明。

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

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

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

参数:

¥Parameters:

  • color:颜色对象。

    ¥color: A color object.

  • amount:百分比 0-100%。

    ¥amount: A percentage 0-100%.

  • method:可选,设置为 relative 以相对于当前值进行调整。

    ¥method: Optional, set to relative for the adjustment to be relative to the current value.

返回:color

¥Returns: color

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

¥Example: fadein(hsla(90, 90%, 50%, 0.5), 10%)

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

¥Output: rgba(128, 242, 13, 0.6) // hsla(90, 90%, 50%, 0.6)

fadeout

增加颜色的透明度(或降低不透明度),使其不透明。要朝另一个方向淡入淡出,请使用 fadein

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

参数:

¥Parameters:

  • color:颜色对象。

    ¥color: A color object.

  • amount:百分比 0-100%。

    ¥amount: A percentage 0-100%.

  • method:可选,设置为 relative 以相对于当前值进行调整。

    ¥method: Optional, set to relative for the adjustment to be relative to the current value.

返回:color

¥Returns: color

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

¥Example: fadeout(hsla(90, 90%, 50%, 0.5), 10%)

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

¥Output: rgba(128, 242, 13, 0.4) // hsla(90, 90%, 50%, 0.4)

fade

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

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

参数:

¥Parameters:

  • color:颜色对象。

    ¥color: A color object.

  • amount:百分比 0-100%。

    ¥amount: A percentage 0-100%.

返回:color

¥Returns: color

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

¥Example: fade(hsl(90, 90%, 50%), 10%)

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

¥Output: rgba(128, 242, 13, 0.1) //hsla(90, 90%, 50%, 0.1)

spin

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

¥Rotate the hue angle of a color in either direction.

虽然角度作用域是 0-360,但它应用了 mod 360 操作,因此你可以传入更大(或负)的值,它们将环绕,例如 360 度和 720 度的角度将产生相同的结果。请注意,颜色是通过 RGB 转换传递的,它不会保留灰色的色调值(因为没有饱和度时色调没有意义),因此请确保以保留色调的方式应用函数,例如不要 做这个:

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

颜色始终作为 RGB 值返回,因此将 spin 应用于灰度值将不会执行任何操作。

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

参数:

¥Parameters:

  • color:颜色对象。

    ¥color: A color object.

  • angle:要旋转的度数(+ 或 -)。

    ¥angle: A number of degrees to rotate (+ or -).

返回:color

¥Returns: color

示例:

¥Example:

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

输出:

¥Output:

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

Color 1

Color 2

Color 1

Color 2

mix

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

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

参数:

¥Parameters:

  • color1:颜色对象。

    ¥color1: A color object.

  • color2:颜色对象。

    ¥color2: A color object.

  • weight:可选,两种颜色之间的百分比平衡点,默认为 50%。

    ¥weight: Optional, a percentage balance point between the two colors, defaults to 50%.

返回:color

¥Returns: color

示例:

¥Example:

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

输出:

¥Output:

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

Color 1

  • Color 2

Color 3

tint

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

¥Mix color with white in variable proportion. It is the same as calling mix(#ffffff, @color, @weight)

参数:

¥Parameters:

  • color:颜色对象。

    ¥color: A color object.

  • weight:可选,颜色和白色之间的百分比平衡点,默认为 50%。

    ¥weight: Optional, a percentage balance point between color and white, defaults to 50%.

返回:color

¥Returns: color

示例:

¥Example:

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

输出:

¥Output:

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

Color 1

Color 2

shade

以可变比例混合颜色和黑色。与调用 mix(#000000, @color, @weight) 相同

¥Mix color with black in variable proportion. It is the same as calling mix(#000000, @color, @weight)

参数:

¥Parameters:

  • color:颜色对象。

    ¥color: A color object.

  • weight:可选,颜色和黑色之间的百分比平衡点,默认为 50%。

    ¥weight: Optional, a percentage balance point between color and black, defaults to 50%.

返回:color

¥Returns: color

示例:

¥Example:

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

输出:

¥Output:

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

Color 1

Color 2

greyscale

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

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

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

¥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:颜色对象。

¥Parameters: color: A color object.

返回:color

¥Returns: color

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

¥Example: greyscale(hsl(90, 90%, 50%))

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

¥Output: #808080 // hsl(90, 0%, 50%)

Color 1

Color 2

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

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

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

¥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

¥Output: #cacaca

Color 1

Color 2

这次灰色的明度看起来和绿色差不多,但实际上它的值更高。

¥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.

这对于确保颜色在背景下可读很有用,这对于可访问性合规性也很有用。此功能与 Compass for SASS 中的对比函数 的工作方式相同。根据 WCAG 2.0,使用伽玛校正后的 luma 值而不是亮度来比较颜色。

¥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 gamma-corrected 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.

参数:

¥Parameters:

  • color:要比较的颜色对象。

    ¥color: A color object to compare against.

  • dark:optional - 指定的深色(默认为黑色)。

    ¥dark: optional - A designated dark color (defaults to black).

  • light:optional - 指定的亮色(默认为白色)。

    ¥light: optional - A designated light color (defaults to white).

  • threshold:optional - 百分比 0-100%,指定从 "dark" 到 "light" 的过渡位置(默认为 43%,与 SASS 匹配)。这用于以一种或另一种方式偏置对比度,例如,允许你决定 50% 的灰色背景是否应产生黑色或白色文本。你通常会将 'lighter' 调色板设置得较低,'darker' 调色板设置得较高。

    ¥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

¥Returns: color

示例:

¥Example:

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

输出:

¥Output:

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

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

¥These examples use the above 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 example:

Color 1

Color 1

Color 1

Color 1

Color 1


颜色混合函数

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

¥These operations are similar (though not necessarily identical) to the blend modes found in image editors like Photoshop, Fireworks, or GIMP, so you can use them to make your CSS colors match your images.

multiply

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

¥Multiply two colors. Corresponding RGB channels from each of the two colors are multiplied together then divided by 255. The result is a darker color.

参数:

¥Parameters:

  • color1:颜色对象。

    ¥color1: A color object.

  • color2:颜色对象。

    ¥color2: A color object.

返回:color

¥Returns: color

示例:

¥Examples:

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

screen

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

¥Do the opposite of multiply. The result is a brighter color.

参数:

¥Parameters:

  • color1:颜色对象。

    ¥color1: A color object.

  • color2:颜色对象。

    ¥color2: A color object.

返回:color

¥Returns: color

示例:

¥Example:

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

overlay

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

¥Combines the effects of both multiply and screen. Conditionally make light channels lighter and dark channels darker. Note: The results of the conditions are determined by the first color parameter.

参数:

¥Parameters:

  • color1:基色对象。也是使结果更亮或更暗的决定色。

    ¥color1: A base color object. Also the determinant color to make the result lighter or darker.

  • color2:要叠加的颜色对象。

    ¥color2: A color object to overlay.

返回:color

¥Returns: color

示例:

¥Example:

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

softlight

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

¥Similar to overlay but avoids pure black resulting in pure black, and pure white resulting in pure white.

参数:

¥Parameters:

  • color1:要柔和地照亮另一个的颜色对象。

    ¥color1: A color object to soft light another.

  • color2:要柔和变亮的颜色对象。

    ¥color2: A color object to be soft lighten.

返回:color

¥Returns: color

示例:

¥Example:

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

hardlight

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

¥The same as overlay but with the color roles reversed.

参数:

¥Parameters:

  • color1:要叠加的颜色对象。

    ¥color1: A color object to overlay.

  • color2:基色对象。也是使结果更亮或更暗的决定色。

    ¥color2: A base color object. Also the determinant color to make the result lighter or darker.

返回:color

¥Returns: color

示例:

¥Example:

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

difference

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

¥Subtracts the second color from the first color on a channel-by-channel basis. Negative values are inverted. Subtracting black results in no change; subtracting white results in color inversion.

参数:

¥Parameters:

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

    ¥color1: A color object to act as the minuend.

  • color2:用作减数的颜色对象。

    ¥color2: A color object to act as the subtrahend.

返回:color

¥Returns: color

示例:

¥Example:

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

exclusion

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

¥A similar effect to difference with lower contrast.

参数:

¥Parameters:

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

    ¥color1: A color object to act as the minuend.

  • color2:用作减数的颜色对象。

    ¥color2: A color object to act as the subtrahend.

返回:color

¥Returns: color

示例:

¥Example:

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

average

在每个通道 (RGB) 的基础上计算两种颜色的平均值。

¥Compute the average of two colors on a per-channel (RGB) basis.

参数:

¥Parameters:

  • color1:颜色对象。

    ¥color1: A color object.

  • color2:颜色对象。

    ¥color2: A color object.

返回:color

¥Returns: color

示例:

¥Example:

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

negation

difference 执行相反的操作。

¥Do the opposite effect to difference.

结果是更亮的颜色。注意:相反的效果并不意味着加法运算产生的反转效果。

¥The result is a brighter color. Note: The opposite effect doesn't mean the inverted effect as resulting from an addition operation.

参数:

¥Parameters:

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

    ¥color1: A color object to act as the minuend.

  • color2:用作减数的颜色对象。

    ¥color2: A color object to act as the subtrahend.

返回:color

¥Returns: color

示例:

¥Example:

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