diff --git a/translate/1.3.3/function.html b/translate/1.3.3/function.html index 946f483..7a45a4b 100644 --- a/translate/1.3.3/function.html +++ b/translate/1.3.3/function.html @@ -1,48 +1,48 @@

Function Reference

-

Index(翻译中,欢迎供稿)

- -
escape(@string);             // URL encodes a string
-
-unit(@dimension, [@unit: ""]); // remove or change the unit of a dimension
-color(@string);                // parses a string to a color
-
-ceil(@number);               // rounds up to an integer
-floor(@number);              // rounds down to an integer
-percentage(@number);         // converts to a %, e.g. 0.5 -> 50%
-round(number, [places: 0]);  // rounds a number to a number of places
-
-rgb(@r, @g, @b);                             // converts to a color
-rgba(@r, @g, @b, @a);                        // converts to a color
-argb(@color);                                // creates a #AARRGGBB
-hsl(@hue, @saturation, @lightness);          // creates a color
-hsla(@hue, @saturation, @lightness, @alpha); // creates a color
-hsv(@hue, @saturation, @value);              // creates a color
-hsva(@hue, @saturation, @value, @alpha);     // creates a color
-
-hue(@color);        // returns the `hue` channel of @color
-saturation(@color); // returns the `saturation` channel of @color
-lightness(@color);  // returns the 'lightness' channel of @color
-red(@color);        // returns the 'red' channel of @color
-green(@color);      // returns the 'green' channel of @color
-blue(@color);       // returns the 'blue' channel of @color
-alpha(@color);      // returns the 'alpha' channel of @color
-luma(@color);       // returns the 'luma' value (perceptual brightness) of @color
-
-saturate(@color, 10%);   // return a color 10% points *more* saturated
-desaturate(@color, 10%); // return a color 10% points *less* saturated
-lighten(@color, 10%);    // return a color 10% points *lighter*
-darken(@color, 10%);     // return a color 10% points *darker*
-fadein(@color, 10%);     // return a color 10% points *less* transparent
-fadeout(@color, 10%);    // return a color 10% points *more* transparent
-fade(@color, 50%);       // return @color with 50% transparency
-spin(@color, 10);        // return a color with a 10 degree larger in hue
-mix(@color1, @color2, [@weight: 50%]);  // return a mix of @color1 and @color2
-greyscale(@color);       // returns a grey, 100% desaturated color
+      

Index

+ +
escape(@string);                             // 通过 URL-encoding 编码字符串
+
+unit(@dimension, [@unit: ""]);               // 移除或替换属性值的单位
+color(@string);                              // 将字符串解析为颜色值
+
+ceil(@number);                               // 向上取整
+floor(@number);                              // 向下取整
+percentage(@number);                         // 将浮点数转换为百分比,例如 0.5 -> 50%
+round(number, [places: 0]);                  // 四舍五入取整
+
+rgb(@r, @g, @b);                             // 转换为颜色值
+rgba(@r, @g, @b, @a);                        // 转换为颜色值
+argb(@color);                                // 创建 #AARRGGBB 格式的颜色值
+hsl(@hue, @saturation, @lightness);          // 创建颜色值
+hsla(@hue, @saturation, @lightness, @alpha); // 创建颜色值
+hsv(@hue, @saturation, @value);              // 创建颜色值
+hsva(@hue, @saturation, @value, @alpha);     // 创建颜色值
+
+hue(@color);                                 // 从颜色值中提取 `hue` 值
+saturation(@color);                          // 从颜色值中提取 `saturation` 值
+lightness(@color);                           // 从颜色值中提取 'lightness' 值
+red(@color);                                 // 从颜色值中提取 'red' 值
+green(@color);                               // 从颜色值中提取 'green' 值
+blue(@color);                                // 从颜色值中提取 'blue' 值
+alpha(@color);                               // 从颜色值中提取 'alpha' 值
+luma(@color);                                // 从颜色值中提取 'luma' 值
+
+saturate(@color, 10%);                       // 饱和度增加 10%
+desaturate(@color, 10%);                     // 饱和度降低 10%
+lighten(@color, 10%);                        // 亮度增加 10%
+darken(@color, 10%);                         // 亮度降低 10%
+fadein(@color, 10%);                         // 透明度增加 10%
+fadeout(@color, 10%);                        // 透明度降低 10%
+fade(@color, 50%);                           // 设定透明度为 50%
+spin(@color, 10);                            // 色相值增加 10
+mix(@color1, @color2, [@weight: 50%]);       // 混合两种颜色
+greyscale(@color);                           // 完全移除饱和度,输出灰色
 contrast(@color1, [@darkcolor: black], [@lightcolor: white], [@threshold: 43%]); 
-    // return @darkcolor if @color1 is > 43% luma  
-    // otherwise return @lightcolor
+                                             // 如果 @color1 的 luma 值 > 43% 输出 @darkcolor
+                                             // 否则输出 @lightcolor
 
 multiply(@color1, @color2);
 screen(@color1, @color2);
@@ -55,839 +55,839 @@ 

Index(翻译中,欢迎供稿)

negation(@color1, @color2);
-

String functions

+

字符串函数 (String functions)

-

escape

+

escape(@string)

-

Applies URL-encoding to =, :, #, ;, ( and ) characters.

+

=, :, #, ;, () 等字符通过 URL-encoding 编码输出。

-

Parameters:

+

参数:

    -
  • string: A string to escape
  • +
  • @string: 字符串 (A string to escape.)
-

Returns: string

+

返回值:字符串 (string)

-

Example:

+

例如:

escape('a=1')
 
-

Output:

+

输出:

a%3D1
 
-

Misc functions

+

综合类函数 (Misc functions)

-

color

+

color(@string)

-

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

+

解析颜色,将代表颜色的字符串转换为颜色值。

-

Parameters:

+

参数:

    -
  • string: A string of the color
  • +
  • @string: 字符串 (A string of the color.)
-

Example:

+

例如:

color("#aaa");
 
-

Output:

+

输出:

#aaa
 
-

unit

+

unit(@dimension, [@unit: ""])

-

Remove or change the unit of a dimension

+

移除或替换属性值 (dimension) 的单位。(注:A dimension is a number immediately followed by a unit identifier.

-

Parameters:

+

参数:

    -
  • dimension: A number, with or without a dimension
  • -
  • unit: Optional: the unit to change to, or if omitted it will remove the unit
  • +
  • @dimension: 数字,带或不带单位 (A number, with or without a dimension.)
  • +
  • @unit: 可选:将要替换成的单位,如果省略则移除原单位
-

Example:

+

例如:

unit(5, px)
 
-

Output:

+

输出:

5px
 
-

Example:

+

例如:

unit(5em)
 
-

Output:

+

输出:

5
 
-

Math functions

+

算数函数 (Math functions)

-

ceil

+

ceil(@number)

-

Rounds up to the next highest integer.

+

向上取整。

-

Parameters:

+

参数:

    -
  • number: A floating point number.
  • +
  • @number: 浮点数 (A floating point number.)
-

Returns: integer

+

返回值:整数 (integer)

-

Example:

+

例如:

ceil(2.4)
 
-

Output:

+

输出:

3
 
-

floor

+

floor(@number)

-

Rounds down to the next lowest integer.

+

向下取整。

-

Parameters:

+

参数:

    -
  • number: A floating point number.
  • +
  • @number: 浮点数 (A floating point number.)
-

Returns: integer

+

返回值:整数 (integer)

-

Example:

+

例如:

floor(2.6)
 
-

Output:

+

输出:

2
 
-

percentage

+

percentage(@number)

-

Converts a floating point number into a percentage string.

+

将浮点数 (A floating point number) 转换为百分比字符串 (percentage string)。

-

Parameters:

+

参数:

    -
  • number: A floating point number.
  • +
  • @number: 浮点数 (A floating point number.)
-

Returns: string

+

返回值:字符串 (string)

-

Example:

+

例如:

percentage(0.5)
 
-

Output:

+

输出:

50%
 
-

round

+

round(number, [places: 0])

-

Applies rounding.

+

四舍五入取整。

-

Parameters:

+

参数:

    -
  • number: A floating point number.
  • -
  • decimalPlaces: Optional: The number of decimal places to round to. Defaults to 0.
  • +
  • @number: 浮点数 (A floating point number.)
  • +
  • @decimalPlaces: 可选:四舍五入取整的小数点位置,默认值 0。
-

Returns: number

+

返回值:数字 (number)

-

Example:

+

例如:

round(1.67)
 
-

Output:

+

输出:

2
 
-

Example:

+

例如:

round(1.67, 1)
 
-

Output:

+

输出:

1.7
 
-

Color functions

+

颜色函数 (Color functions)

-

Color definition

+

颜色解释 (Color definition)

-

rgb

+

rgb(@r, @g, @b)

-

Creates an opaque color object from decimal red, green and blue (RGB) values. Literal color values in standard HTML/CSS formats may also be used to define colors, for example #ff0000.

+

通过十进制红色,绿色,蓝色三种值 (RGB) 创建不透明的颜色对象。在 HTML/CSS 中也会用文本颜色值 (literal color values) 定义颜色,例如 red -> #ff0000

-

Parameters:

+

参数:

    -
  • red: An integer 0-255 or percentage 0-100%.
  • -
  • green: An integer 0-255 or percentage 0-100%.
  • -
  • blue: An integer 0-255 or percentage 0-100%.
  • +
  • @red: 整数 0-255 或百分比 0-100%
  • +
  • @green: 整数 0-255 或百分比 0-100%
  • +
  • @blue: 整数 0-255 或百分比 0-100%
-

Returns: color

+

返回值:颜色 (color)

-

Example:

+

例如:

rgb(90, 129, 32)
 
-

Output:

+

输出:

#5a8120
 
-

rgba

+

rgba(@r, @g, @b, @a)

-

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

+

通过十进制红色,绿色,蓝色,以及 alpha 四种值 (RGBA) 创建透明的颜色对象。

-

Parameters:

+

参数:

    -
  • red: An integer 0-255 or percentage 0-100%.
  • -
  • green: An integer 0-255 or percentage 0-100%.
  • -
  • blue: An integer 0-255 or percentage 0-100%.
  • -
  • alpha: An number 0-1 or percentage 0-100%.
  • +
  • @red: 整数 0-255 或百分比 0-100%
  • +
  • @green: 整数 0-255 或百分比 0-100%
  • +
  • @blue: 整数 0-255 或百分比 0-100%
  • +
  • @alpha: 数字 0-1 或百分比 0-100%
-

Returns: color

+

返回值:颜色 (color)

-

Example:

+

例如:

rgba(90, 129, 32, 0.5)
 
-

Output:

+

输出:

rgba(90, 129, 32, 0.5)
 
-

argb

+

argb(@color)

-

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

+

创建格式为 #AARRGGBB 的十六进制 (hex representation) 颜色 (注意不是 #RRGGBBAA !)。

-

Parameters:

+

参数:

    -
  • color: A color object.
  • +
  • @color: 颜色对象 (A color object.)
-

Returns: string

+

返回值:字符串 (string)

-

Example:

+

例如:

argb(rgba(90, 23, 148, 0.5));
 
-

Output:

+

输出:

#805a1794
 
-

hsl

+

hsl(@hue, @saturation, @lightness)

-

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

+

通过色相 (hue),饱和度 (saturation),亮度 (lightness) 三种值 (HSL) 创建不透明的颜色对象。

-

Parameters:

+

参数:

    -
  • hue: An integer 0-360 representing degrees.
  • -
  • saturation: A percentage 0-100% or number 0-1.
  • -
  • lightness: A percentage 0-100% or number 0-1.
  • +
  • @hue: 整数 0-360 表示度数。
  • +
  • @saturation: 百分比 0-100% 或数字 0-1
  • +
  • @lightness: 百分比 0-100% 或数字 0-1
-

Returns: color

+

返回值:颜色 (color)

-

Example:

+

例如:

hsl(90, 100%, 50%)
 
-

Output:

+

输出:

#80ff00
 
-

This is useful if you want to create a new color based on another color’s channel, for example:

+

可以用来基于一种颜色创建另一种颜色, 例如:

@new: hsl(hue(@old), 45%, 90%);
 
-

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

+

@new 将使用 @old色相值,以及它自己的饱和度与亮度。

-

hsla

+

hsla(@hue, @saturation, @lightness, @alpha)

-

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

+

通过色相 (hue),饱和度 (saturation),亮度 (lightness),以及 alpha 四种值 (HSLA) 创建透明的颜色对象。

-

Parameters:

+

参数:

    -
  • hue: An integer 0-360 representing degrees.
  • -
  • saturation: A percentage 0-100% or number 0-1.
  • -
  • lightness: A percentage 0-100% or number 0-1.
  • -
  • alpha: A percentage 0-100% or number 0-1.
  • +
  • @hue: 整数 0-360 表示度数
  • +
  • @saturation: 百分比 0-100% 或数字 0-1
  • +
  • @lightness: 百分比 0-100% 或数字 0-1
  • +
  • @alpha: 百分比 0-100% 或数字 0-1
-

Returns: color

+

返回值:颜色 (color)

-

Example:

+

例如:

hsl(90, 100%, 50%, 0.5)
 
-

Output:

+

输出:

rgba(128, 255, 0, 0.5)
 
-

hsv

+

hsv(@hue, @saturation, @value)

-

Creates an opaque color object from hue, saturation and value (HSV) values. Note that this is not the same as hsl.

+

通过色相 (hue),饱和度 (saturation),明度 (value) 三种值 (HSV) 创建不透明的颜色对象。注意与 HSL 不同

-

Parameters:

+

参数:

    -
  • hue: An integer 0-360 representing degrees.
  • -
  • saturation: A percentage 0-100% or number 0-1.
  • -
  • value: A percentage 0-100% or number 0-1.
  • +
  • @hue: 整数 0-360 表示度数
  • +
  • @saturation: 百分比 0-100% 或数字 0-1
  • +
  • @value: 百分比 0-100% 或数字 0-1
-

Returns: color

+

返回值:颜色 (color)

-

Example:

+

例如:

hsv(90, 100%, 50%)
 
-

Output:

+

输出:

#408000
 
-

hsva

+

hsva(@hue, @saturation, @value, @alpha)

-

Creates a transparent color object from hue, saturation, value and alpha (HSVA) values. Note that this is not the same as hsla.

+

通过色相 (hue),饱和度 (saturation),明度 (value),以及 alpha 四种值 (HSVA) 创建透明的颜色对象。注意与 HSLA 不同。

-

Parameters:

+

参数:

    -
  • hue: An integer 0-360 representing degrees.
  • -
  • saturation: A percentage 0-100% or number 0-1.
  • -
  • value: A percentage 0-100% or number 0-1.
  • -
  • alpha: A percentage 0-100% or number 0-1.
  • +
  • @hue: 整数 0-360 表示度数
  • +
  • @saturation: 百分比 0-100% 或数字 0-1
  • +
  • @value: 百分比 0-100% 或数字 0-1
  • +
  • @alpha: 百分比 0-100% 或数字 0-1
-

Returns: color

+

返回值:颜色 (color)

-

Example:

+

例如:

hsva(90, 100%, 50%, 0.5)
 
-

Output:

+

输出:

rgba(64, 128, 0, 0.5)
 
-

Color channel information

+

颜色通道信息 (Color channel information)

-

hue

+

hue(@color)

-

Extracts the hue channel of a color object.

+

从颜色对象中提取色相值 (hue channel)。

-

Parameters:

+

参数:

    -
  • color: A color object.
  • +
  • @color: 颜色对象 (A color object.)
-

Returns: integer 0-360

+

返回值:整数 0-360

-

Example:

+

例如:

hue(hsl(90, 100%, 50%))
 
-

Output:

+

输出:

90
 
-

saturation

+

saturation(@color)

-

Extracts the saturation channel of a color object.

+

从颜色对象中提取饱和度值 (saturation channel)。

-

Parameters:

+

参数:

    -
  • color: A color object.
  • +
  • @color: 颜色对象 (A color object.)
-

Returns: percentage 0-100

+

返回值:百分比值 0-100

-

Example:

+

例如:

saturation(hsl(90, 100%, 50%))
 
-

Output:

+

输出:

100%
 
-

lightness

+

lightness(@color)

-

Extracts the lightness channel of a color object.

+

从颜色对象中提取亮度值 (lightness channel)。

-

Parameters:

+

参数:

    -
  • color: A color object.
  • +
  • @color: 颜色对象 (A color object.)
-

Returns: percentage 0-100

+

返回值:百分比值 0-100

-

Example:

+

例如:

lightness(hsl(90, 100%, 50%))
 
-

Output:

+

输出:

50%
 
-

red

+

red(@color)

-

Extracts the red channel of a color object.

+

从颜色对象中提取红色值。

-

Parameters:

+

参数:

    -
  • color: A color object.
  • +
  • @color: 颜色对象 (A color object.)
-

Returns: integer 0-255

+

返回值:整数 0-255

-

Example:

+

例如:

red(rgb(10, 20, 30))
 
-

Output:

+

输出:

10
 
-

green

+

green(@color)

-

Extracts the green channel of a color object.

+

从颜色对象中提取绿色值。

-

Parameters:

+

参数:

    -
  • color: A color object.
  • +
  • @color: 颜色对象 (A color object.)
-

Returns: integer 0-255

+

返回值:整数 0-255

-

Example:

+

例如:

green(rgb(10, 20, 30))
 
-

Output:

+

输出:

20
 
-

blue

+

blue(@color)

-

Extracts the blue channel of a color object.

+

从颜色对象中提取蓝色值。

-

Parameters:

+

参数:

    -
  • color: A color object.
  • +
  • @color: 颜色对象 (A color object.)
-

Returns: integer 0-255

+

返回值:整数 0-255

-

Example:

+

例如:

blue(rgb(10, 20, 30))
 
-

Output:

+

输出:

30
 
-

alpha

+

alpha(@color)

-

Extracts the alpha channel of a color object.

+

从颜色对象中提取 alpha 值。

-

Parameters:

+

参数:

    -
  • color: A color object.
  • +
  • @color: 颜色对象 (A color object.)
-

Returns: float 0-1

+

返回值:介于 0-1 之间 (float 0-1)

-

Example:

+

例如:

alpha(rgba(10, 20, 30, 0.5))
 
-

Output:

+

输出:

0.5
 
-

luma

+

luma(@color)

-

Calculates the luma) (perceptual brightness) of a color object. Uses SMPTE C / Rec. 709 coefficients, as recommended in WCAG 2.0. This calculation is also used in the contrast function.

+

计算颜色对象的 luma 值(亮度值:perceptual brightness)。Uses SMPTE C / Rec. 709 coefficients, as recommended in WCAG 2.0. 这个计算公式也用在 contrast() 函数中。

-

Parameters:

+

参数:

    -
  • color: A color object.
  • +
  • @color: 颜色对象 (A color object.)
-

Returns: percentage 0-100%

+

返回值:百分比 0-100%

-

Example:

+

例如:

luma(rgb(100, 200, 30))
 
-

Output:

+

输出:

65%
 
-

Color operations

+

颜色值运算 (Color operations)

-

Color operations generally take parameters in the same units as the values they are changing, and percentage are handled as absolutes, so increasing a 10% value by 10% results in 20%, not 11%, and values are clamped to their allowed ranges; they do not wrap around. Where return values are shown, we’ve also shown formats that make it clear what each function has done, in addition to the hex versions that you will usually be be working with.

+

颜色值运算有几点注意事项:参数必须单位/格式相同;百分比将作为绝对值处理,比如 10% 增加 10%,结果是 20% 而不是 11%;参数值只能在限定的范围内;they do not wrap around (这一句不清楚意思)。返回值时,除了十六进制的颜色值 (hex versions) 外将对其他格式做简化处理。

-

saturate

+

saturate(@color, 10%)

-

Increase the saturation of a color by an absolute amount.

+

增加一定数值的颜色饱和度。

-

Parameters:

+

参数:

    -
  • color: A color object.
  • -
  • amount: A percentage 0-100%.
  • +
  • @color: 颜色对象 (A color object.)
  • +
  • @amount: 百分比 0-100%
-

Returns: color

+

返回值:颜色 (color)

-

Example:

+

例如:

saturate(hsl(90, 90%, 50%), 10%)
 
-

Output:

+

输出:

#80ff00 // hsl(90, 100%, 50%)
 
-

desaturate

+

desaturate(@color, 10%)

-

Decrease the saturation of a color by an absolute amount.

+

降低一定数值的颜色饱和度。

-

Parameters:

+

参数:

    -
  • color: A color object.
  • -
  • amount: A percentage 0-100%.
  • +
  • @color: 颜色对象 (A color object.)
  • +
  • @amount: 百分比 0-100%
-

Returns: color

+

返回值:颜色 (color)

-

Example:

+

例如:

desaturate(hsl(90, 90%, 50%), 10%)
 
-

Output:

+

输出:

#80e51a // hsl(90, 80%, 50%)
 
-

lighten

+

lighten(@color, 10%)

-

Increase the lightness of a color by an absolute amount.

+

增加一定数值的颜色亮度。

-

Parameters:

+

参数:

    -
  • color: A color object.
  • -
  • amount: A percentage 0-100%.
  • +
  • @color: 颜色对象 (A color object.)
  • +
  • @amount: 百分比 0-100%
-

Returns: color

+

返回值:颜色 (color)

-

Example:

+

例如:

lighten(hsl(90, 90%, 50%), 10%)
 
-

Output:

+

输出:

#99f53d // hsl(90, 90%, 60%)
 
-

darken

+

darken(@color, 10%)

-

Decrease the lightness of a color by an absolute amount.

+

降低一定数值的颜色亮度。

-

Parameters:

+

参数:

    -
  • color: A color object.
  • -
  • amount: A percentage 0-100%.
  • +
  • @color: 颜色对象 (A color object.)
  • +
  • @amount: 百分比 0-100%
-

Returns: color

+

返回值:颜色 (color)

-

Example:

+

例如:

darken(hsl(90, 90%, 50%), 10%)
 
-

Output:

+

输出:

#66c20a // hsl(90, 90%, 40%)
 
-

fadein

+

fadein(@color, 10%)

-

Decrease the transparency (or increase the opacity) of a color, making it more opaque. Has no effect on opaque colours. To fade in the other direction use fadeout.

+

降低颜色的透明度(或增加不透明度),令其更不透明,对不透明的颜色无效。如果要增加颜色的透明度,使用 fadeout() 函数。

-

Parameters:

+

参数:

    -
  • color: A color object.
  • -
  • amount: A percentage 0-100%.
  • +
  • @color: 颜色对象 (A color object.)
  • +
  • @amount: 百分比 0-100%
-

Returns: color

+

返回值:颜色 (color)

-

Example:

+

例如:

fadein(hsla(90, 90%, 50%, 0.5), 10%)
 
-

Output:

+

输出:

rgba(128, 242, 13, 0.6) // hsla(90, 90%, 50%, 0.6)
 
-

fadeout

+

fadeout(@color, 10%)

-

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

+

增加颜色的透明度(或降低不透明度),令其更透明,对不透明的颜色无效。如果要增加颜色的透明度,使用 fadein() 函数。

-

Parameters:

+

参数:

    -
  • color: A color object.
  • -
  • amount: A percentage 0-100%.
  • +
  • @color: 颜色对象 (A color object.)
  • +
  • @amount: 百分比 0-100%
-

Returns: color

+

返回值:颜色 (color)

-

Example:

+

例如:

fadeout(hsla(90, 90%, 50%, 0.5), 10%)
 
-

Output:

+

输出:

rgba(128, 242, 13, 0.4) // hsla(90, 90%, 50%, 0.6)
 
-

fade

+

fade(@color, 50%)

-

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

+

给颜色(包括不透明的颜色)设定一定数值的透明度。

-

Parameters:

+

参数:

    -
  • color: A color object.
  • -
  • amount: A percentage 0-100%.
  • +
  • @color: 颜色对象 (A color object.)
  • +
  • @amount: 百分比 0-100%
-

Returns: color

+

返回值:颜色 (color)

-

Example:

+

例如:

fade(hsl(90, 90%, 50%), 10%)
 
-

Output:

+

输出:

rgba(128, 242, 13, 0.1) //hsla(90, 90%, 50%, 0.1)
 
-

spin

+

spin(@color, 10)

-

Rotate the hue angle of a color in either direction. While the angle range is 0-360, it applies a mod 360 operation, so you can pass in much larger (or negative) values and they will wrap around e.g. angles of 360 and 720 will produce the same result. Note that colours 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:

+

向任意方向旋转颜色的色相角度 (hue angle),旋转范围 0-360,超过一周后将从起点开始继续旋转(+ - 控制方向),比如旋转 360 度与 720 度是相同的结果。需要注意的是,颜色值会通过 RGB 格式转换,这个过程不能保留灰色的色相值(灰色没有饱和度,色相值也就没有意义了),因此要确定使用函数的方法能够保留颜色的色相值,例如不要这样使用函数:

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

Do this instead:

+

而应该用这种方法代替:

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

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

+

因为颜色值永远输出为 RGB 格式,因此 spin() 函数对灰色无效。

-

Parameters:

+

参数:

    -
  • color: A color object.
  • -
  • angle: A number of degrees to rotate (+ or –).
  • +
  • @color: 颜色对象 (A color object.)
  • +
  • @angle: 任意数字表示角度 (+ 或 – 表示方向)
-

Returns: color

+

返回值:颜色 (color)

-

Example:

+

例如:

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

Output:

+

输出:

#f27f0d // hsl(30, 90%, 50%)
 #f20d33 // hsl(350, 90%, 50%)
 
-

mix

+

mix(@color1, @color2, [@weight: 50%])

-

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

+

根据比例混合两种颜色,包括计算不透明度。

-

Parameters:

+

参数:

    -
  • color1: A color object.
  • -
  • color1: A color object.
  • -
  • weight: Optional, a percentage balance point between the two colors, defaults to 50%.
  • +
  • @color1: 颜色对象 (A color object.)
  • +
  • @color1: 颜色对象 (A color object.)
  • +
  • @weight: 可选项:平衡两种颜色的百分比, 默认 50%。 (Optional, a percentage balance point between the two colors, defaults to 50%.)
-

Returns: color

+

返回值:颜色 (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)
 
-

greyscale

+

greyscale(@color)

-

Remove all saturation from a color; the same as calling desaturate(@color, 100%). Because the saturation is not affected by hue, the resulting color mapping may be somewhat dull or muddy; luma may provide a better result as it extracts perceptual rather than linear brightness, for example greyscale('#0000ff') will return the same value as greyscale('#00ff00'), though they appear quite different in brightness to the human eye.

+

完全移除颜色的饱和度,与 desaturate(@color, 100%) 函数效果相同。因为颜色的饱和度不受色相值影响,所以输出的颜色会稍显暗淡 (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.

-

Parameters:

+

参数:

    -
  • color: A color object.
  • +
  • @color: 颜色对象 (A color object.)
-

Returns: color

+

返回值:颜色 (color)

-

Example:

+

例如:

greyscale(hsl(90, 90%, 50%))
 
-

Output:

+

输出:

#808080 // hsl(90, 0%, 50%)
 
-

contrast

+

contrast(@background, [@darkcolor: black], [@lightcolor: white], [@threshold: 43%])

-

Choose which of two colors provides the greatest contrast with another. This is useful for ensuring that a color is readable against a background, which is also useful for accessibility compliance. This function works the same way as the contrast function in Compass for SASS. In accordance with WCAG 2.0, colors are compared using their luma value, not their lightness.

+

这个函数对比 @background 的 luma 值与 @threshold 参数的大小,如果大于输出 @darkcolor, 小于则输出 @lightcolor,便于选择相对于背景更容易阅读的颜色,同时提高了使用颜色的灵活性,与 Compass 的 contrast() 函数 工作方式相同。根据 WCAG 2.0 应该对比颜色的 luma 值,而不是亮度值 (lightness)。

-

Parameters:

+

参数:

    -
  • color: A color object to compare against.
  • -
  • dark: optional – A designated dark color (defaults to black).
  • -
  • light: optional – A designated light color (defaults to white).
  • -
  • threshold: optional – A percentage 0-100% specifying where the transition from “dark” to “light” is (defaults to 43%). 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. Defaults to 43%.
  • +
  • @background: 需要对比的颜色对象 (A color object to compare against.)
  • +
  • @darkcolor: 可选项 – 指定的黑色(默认 black)
  • +
  • @lightcolor: 可选项 – 指定的白色(默认 white)
  • +
  • @threshold: 可选项 – 百分比 0-100% 界定深色过渡到浅色的转变位置(默认 43%),这个数值决定了输出结果偏向于哪一方,比如判断 50% 的灰色背景应该显示白色还是黑色的文字。You would generally set this lower for ‘lighter’ palettes, higher for ‘darker’ ones.
-

Returns: color

+

返回值:颜色 (color)

-

Example:

+

例如:

contrast(#aaaaaa)
 contrast(#222222, #101010)
@@ -896,7 +896,7 @@ 

contrast

contrast(hsl(90, 100%, 50%),#000000,#ffffff,60%);
-

Output:

+

输出:

#000000 // black
 #ffffff // white
@@ -905,25 +905,25 @@ 

contrast

#ffffff // white
-

Color blending

+

颜色混合 (Color blending)

-

These operations are similar as the blend modes found in image editors like Photoshop, Firework or GIMP, so you can use them to make your CSS colors match your images.

+

颜色混合的方式与图像编辑器 Photoshop, Firework 或者 GIMP 的图层混合模式 (layer blending modes) 相似,因此制作 .psd 文件时处理颜色的方法可以同样用在 CSS 中。

-

multiply

+

multiply(@color1, @color2)

-

Multiply two colors. For each two colors their RGB channel are multiplied then divided by 255. The result is a darker color.

+

分别将两种颜色的红绿蓝 (RGB) 三种值做乘法运算,然后再除以 255,输出结果是更深的颜色。

-

Parameters:

+

参数:

    -
  • color1: A color object to multiply against.
  • -
  • color2: A color object to multiply against.
  • +
  • @color1: 颜色对象 (A color object to multiply against.)
  • +
  • @color2: 颜色对象 (A color object to multiply against.)
-

Returns: color

+

返回值:颜色 (color)

-

Examples:

+

例如:

multiply(#ff6600, #000000);
 
@@ -988,21 +988,21 @@

multiply

Color 2 Color 3

-

screen

+

screen(@color1, @color2)

-

Do the opposite effect from multiply. The result is a brighter color.

+

multiply() 函数效果相反,输出结果是更亮的颜色。

-

Parameters:

+

参数:

    -
  • color1: A color object to screen against.
  • -
  • color2: A color object to screen against.
  • +
  • @color1: 颜色对象 (A color object to screen against.)
  • +
  • @color2: 颜色对象 (A color object to screen against.)
-

Returns: color

+

返回值:颜色 (color)

-

Example:

+

例如:

screen(#ff6600, #000000);
 
@@ -1066,21 +1066,21 @@

screen

Color 2 Color 3

-

overlay

+

overlay(@color1, @color2)

-

Combines the effect from 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.

+

结合 multiply()screen() 两个函数的效果,令浅的颜色变得更浅,深的颜色变得更深。注意:输出结果由第一个颜色参数决定。

-

Parameters:

+

参数:

    -
  • color1: A color object to overlay another. Also it is the determinant color to make the result lighter or darker.
  • -
  • color2: A color object to be overlayed.
  • +
  • @color1: 颜色对象 (A color object to overlay another. Also it is the determinant color to make the result lighter or darker.)
  • +
  • @color2: 颜色对象 (A color object to be overlayed.)
-

Returns: color

+

返回值:颜色 (color)

-

Example:

+

例如:

overlay(#ff6600, #000000);
 
@@ -1145,21 +1145,21 @@

overlay

Color 2 Color 3

-

softlight

+

softlight(@color1, @color2)

-

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

+

overlay() 函数效果相似,只是当纯黑色或纯白色作为参数时输出结果不会是纯黑色或纯白色。

-

Parameters:

+

参数:

    -
  • color1: A color object to soft light another.
  • -
  • color2: A color object to be soft lighten.
  • +
  • @color1: 颜色对象 (A color object to soft light another.)
  • +
  • @color2: 颜色对象 (A color object to be soft lighten.)
-

Returns: color

+

返回值:颜色 (color)

-

Example:

+

例如:

softlight(#ff6600, #000000);
 
@@ -1224,21 +1224,21 @@

softlight

Color 2 Color 3

-

hardlight

+

hardlight(@color1, @color2)

-

Similar to overlay but use the second color to detect light and dark channels instead of using the first color.

+

overlay() 函数效果相似,不过由第二个颜色参数决定输出颜色的亮度或黑度,而不是第一个颜色参数决定。

-

Parameters:

+

参数:

    -
  • color1: A color object to overlay another.
  • -
  • color2: A color object to be overlayed. Also it is the determinant color to make the result lighter or darker.
  • +
  • @color1: 颜色对象 (A color object to overlay another.)
  • +
  • @color2: 颜色对象 (A color object to be overlayed. Also it is the determinant color to make the result lighter or darker.)
-

Returns: color

+

返回值:颜色 (color)

-

Example:

+

例如:

hardlight(#ff6600, #000000);
 
@@ -1303,21 +1303,21 @@

hardlight

Color 2 Color 3

-

difference

+

difference(@color1, @color2)

-

Substracts the second color from the first color. The operation is made per RGB channels. The result is a darker color.

+

从第一个颜色值中减去第二个(分别计算 RGB 三种颜色值),输出结果是更深的颜色。

-

Parameters:

+

参数:

    -
  • color1: A color object to act as the minuend.
  • -
  • color2: A color object to act as the subtrahend.
  • +
  • @color1: 颜色对象 (A color object to act as the minuend.)
  • +
  • @color2: 颜色对象 (A color object to act as the subtrahend.)
-

Returns: color

+

返回值:颜色 (color)

-

Example:

+

例如:

difference(#ff6600, #000000);
 
@@ -1382,21 +1382,21 @@

difference

Color 2 Color 3

-

exclusion

+

exclusion(@color1, @color2)

-

Similar effect to difference with lower contrast.

+

效果与 difference() 函数效果相似,只是输出结果差别更小 (lower contrast)。

-

Parameters:

+

参数:

    -
  • color1: A color object to act as the minuend.
  • -
  • color2: A color object to act as the subtrahend.
  • +
  • @color1: 颜色对象 (A color object to act as the minuend.)
  • +
  • @color2: 颜色对象 (A color object to act as the subtrahend.)
-

Returns: color

+

返回值:颜色 (color)

-

Example:

+

例如:

exclusion(#ff6600, #000000);
 
@@ -1461,21 +1461,21 @@

exclusion

Color 2 Color 3

-

average

+

average(@color1, @color2)

-

Compute the average of two colors. The operation is made per RGB channels.

+

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

-

Parameters:

+

参数:

    -
  • color1: A color object.
  • -
  • color2: A color object.
  • +
  • @color1: 颜色对象 (A color object.)
  • +
  • @color2: 颜色对象 (A color object.)
-

Returns: color

+

返回值:颜色 (color)

-

Example:

+

例如:

average(#ff6600, #000000);
 
@@ -1540,21 +1540,21 @@

average

Color 2 Color 3

-

negation

+

negation(@color1, @color2)

-

Do the opposite effect from difference. The result is a brighter color. Note: The opposite effect doesn’t mean the inverted effect as resulting to an addition operation.

+

difference() 函数效果相反,输出结果是更亮的颜色。请注意:效果相反不代表做加法运算。

-

Parameters:

+

参数:

    -
  • color1: A color object to act as the minuend.
  • -
  • color2: A color object to act as the subtrahend.
  • +
  • @color1: 颜色对象 (A color object to act as the minuend.)
  • +
  • @color2: 颜色对象 (A color object to act as the subtrahend.)
-

Returns: color

+

返回值:颜色 (color)

-

Example:

+

例如:

negation(#ff6600, #000000);
 
@@ -1631,7 +1631,7 @@

其他国家的LESS站点

  • Japanese: http://less-ja.studiomohawk.com/
  • Polish: http://ciembor.github.com/lesscss.org/
  • Indonesian: http://bertzzie.com/post/7/dokumentasi-less-bahasa-indonesia
  • -
  • Belorussian: (Out of date) http://www.designcontest.com/show/lesscss-be
  • +
  • Belorussian: (Out of date) http://www.designcontest.com/show/lesscss-be
  • Portugese: (Out of date) http://lesscss.loopinfinito.com.br/