你的分享就是我们的动力 ---﹥

less学习-函数说明

时间:2013-06-17 13:54来源:www.chengxuyuans.com 点击:

Function Reference

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%]); 
                                             // 如果 @color1 的 luma 值 > 43% 输出 @darkcolor
                                             // 否则输出 @lightcolor

multiply(@color1, @color2);
screen(@color1, @color2);
overlay(@color1, @color2);
softlight(@color1, @color2);
hardlight(@color1, @color2);
difference(@color1, @color2);
exclusion(@color1, @color2);
average(@color1, @color2);
negation(@color1, @color2);

字符串函数 (String functions)

escape(@string)

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

参数:

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

返回值:字符串 (string)

例如:

escape('a=1')

输出:

a%3D1

综合类函数 (Misc functions)

color(@string)

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

参数:

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

例如:

color("#aaa");

输出:

#aaa

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

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

参数:

  • @dimension: 数字,带或不带单位 (A number, with or without a dimension.)
  • @unit: 可选:将要替换成的单位,如果省略则移除原单位

例如:

unit(5, px)

输出:

5px

例如:

unit(5em)

输出:

5

算数函数 (Math functions)

ceil(@number)

向上取整。

参数:

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

返回值:整数 (integer)

例如:

ceil(2.4)

输出:

3

floor(@number)

向下取整。

参数:

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

返回值:整数 (integer)

例如:

floor(2.6)

输出:

2

percentage(@number)

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

参数:

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

返回值:字符串 (string)

例如:

percentage(0.5)

输出:

50%

round(number, [places: 0])

四舍五入取整。

参数:

  • @number: 浮点数 (A floating point number.)
  • @decimalPlaces: 可选:四舍五入取整的小数点位置,默认值 0。

返回值:数字 (number)

例如:

round(1.67)

输出:

2

例如:

round(1.67, 1)

输出:

1.7

颜色函数 (Color functions)

颜色解释 (Color definition)

rgb(@r, @g, @b)

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

参数:

  • @red: 整数 0-255 或百分比 0-100%
  • @green: 整数 0-255 或百分比 0-100%
  • @blue: 整数 0-255 或百分比 0-100%

返回值:颜色 (color)

例如:

rgb(90, 129, 32)

输出:

#5a8120

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

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

参数:

  • @red: 整数 0-255 或百分比 0-100%
  • @green: 整数 0-255 或百分比 0-100%
  • @blue: 整数 0-255 或百分比 0-100%
  • @alpha: 数字 0-1 或百分比 0-100%

返回值:颜色 (color)

例如:

rgba(90, 129, 32, 0.5)

输出:

rgba(90, 129, 32, 0.5)

argb(@color)

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

参数:

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

返回值:字符串 (string)

例如:

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

输出:

#805a1794

hsl(@hue, @saturation, @lightness)

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

参数:

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

返回值:颜色 (color)

例如:

hsl(90, 100%, 50%)

输出:

#80ff00

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

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

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

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

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

参数:

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

返回值:颜色 (color)

例如:

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

输出:

rgba(128, 255, 0, 0.5)

hsv(@hue, @saturation, @value)

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

参数:

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

返回值:颜色 (color)

例如:

hsv(90, 100%, 50%)

输出:

#408000

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

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

参数:

  • @hue: 整数 0-360 表示度数
  • @saturation: 百分比 0-100% 或数字 0-1
  • @value: 百分比 0-100% 或数字 0-1
  • @alpha: 百分比 0-100% 或数字 0-1

返回值:颜色 (color)

例如:

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

输出:

rgba(64, 128, 0, 0.5)

颜色通道信息 (Color channel information)

hue(@color)

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

参数:

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

返回值:整数 0-360

例如:

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

输出:

90

saturation(@color)

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

参数:

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

返回值:百分比值 0-100

例如:

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

输出:

100%

lightness(@color)

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

参数:

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

返回值:百分比值 0-100

例如:

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

输出:

50%

red(@color)

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

参数:

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

返回值:整数 0-255

例如:

red(rgb(10, 20, 30))

输出:

10

green(@color)

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

参数:

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

返回值:整数 0-255

例如:

green(rgb(10, 20, 30))

输出:

20

blue(@color)

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

参数:

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

返回值:整数 0-255

例如:

blue(rgb(10, 20, 30))

输出:

30

alpha(@color)

从颜色对象中提取 alpha 值。

参数:

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

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

例如:

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

输出:

0.5

luma(@color)

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

参数:

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

返回值:百分比 0-100%

例如:

luma(rgb(100, 200, 30))

输出:

65%

颜色值运算 (Color operations)

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

saturate(@color, 10%)

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

参数:

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

返回值:颜色 (color)

例如:

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

输出:

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

desaturate(@color, 10%)

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

参数:

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

返回值:颜色 (color)

例如:

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

输出:

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

lighten(@color, 10%)

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

参数:

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

返回值:颜色 (color)

例如:

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

输出:

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

darken(@color, 10%)

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

参数:

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

返回值:颜色 (color)

例如:

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

输出:

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

fadein(@color, 10%)

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

参数:

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

返回值:颜色 (color)

例如:

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

输出:

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

fadeout(@color, 10%)

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

参数:

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

返回值:颜色 (color)

例如:

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

输出:

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

fade(@color, 50%)

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

参数:

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

返回值:颜色 (color)

例如:

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

输出:

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

spin(@color, 10)

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

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

而应该用这种方法代替:

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

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

参数:

  • @color: 颜色对象 (A color object.)
  • @angle: 任意数字表示角度 (+ 或 – 表示方向)

返回值:颜色 (color)

例如:

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

输出:

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

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

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

参数:

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

返回值:颜色 (color)

例如:

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

输出:

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

greyscale(@color)

完全移除颜色的饱和度,与 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.

参数:

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

返回值:颜色 (color)

例如:

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

输出:

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

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

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

参数:

  • @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.

返回值:颜色 (color)

例如:

contrast(#aaaaaa)
contrast(#222222, #101010)
contrast(#222222, #101010, #dddddd)
contrast(hsl(90, 100%, 50%),#000000,#ffffff,40%);
contrast(hsl(90, 100%, 50%),#000000,#ffffff,60%);

输出:

#000000 // black
#ffffff // white
#dddddd
#000000 // black
#ffffff // white

颜色混合 (Color blending)

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

multiply(@color1, @color2)

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

参数:

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

返回值:颜色 (color)

例如:

multiply(#ff6600, #000000);

Color 1 Color 2 Color 3

multiply(#ff6600, #333333);

Color 1 Color 2 Color 3

multiply(#ff6600, #666666);

Color 1 Color 2 Color 3

multiply(#ff6600, #999999);

Color 1 Color 2 Color 3

multiply(#ff6600, #cccccc);

Color 1 Color 2 Color 3

multiply(#ff6600, #ffffff);

Color 1 Color 2 Color 3

multiply(#ff6600, #ff0000);

Color 1 Color 2 Color 3

multiply(#ff6600, #00ff00);

Color 1 Color 2 Color 3

multiply(#ff6600, #0000ff);

Color 1 Color 2 Color 3

screen(@color1, @color2)

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

参数:

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

返回值:颜色 (color)

例如:

screen(#ff6600, #000000);

Color 1 Color 2 Color 3

screen(#ff6600, #333333);

Color 1 Color 2 Color 3

screen(#ff6600, #666666);

Color 1 Color 2 Color 3

screen(#ff6600, #999999);

Color 1 Color 2 Color 3

screen(#ff6600, #cccccc);

Color 1 Color 2 Color 3

screen(#ff6600, #ffffff);

Color 1 Color 2 Color 3

screen(#ff6600, #ff0000);

Color 1 Color 2 Color 3

screen(#ff6600, #00ff00);

Color 1 Color 2 Color 3

screen(#ff6600, #0000ff);

Color 1 Color 2 Color 3

overlay(@color1, @color2)

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

参数:

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

返回值:颜色 (color)

例如:

overlay(#ff6600, #000000);

Color 1 Color 2 Color 3

overlay(#ff6600, #333333);

Color 1 Color 2 Color 3

overlay(#ff6600, #666666);

Color 1 Color 2 Color 3

overlay(#ff6600, #999999);

Color 1 Color 2 Color 3

overlay(#ff6600, #cccccc);

Color 1 Color 2 Color 3

overlay(#ff6600, #ffffff);

Color 1 Color 2 Color 3

overlay(#ff6600, #ff0000);

Color 1 Color 2 Color 3

overlay(#ff6600, #00ff00);

Color 1 Color 2 Color 3

overlay(#ff6600, #0000ff);

Color 1 Color 2 Color 3

softlight(@color1, @color2)

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

参数:

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

返回值:颜色 (color)

例如:

softlight(#ff6600, #000000);

Color 1 Color 2 Color 3

softlight(#ff6600, #333333);

Color 1 Color 2 Color 3

softlight(#ff6600, #666666);

Color 1 Color 2 Color 3

softlight(#ff6600, #999999);

Color 1 Color 2 Color 3

softlight(#ff6600, #cccccc);

Color 1 Color 2 Color 3

softlight(#ff6600, #ffffff);

Color 1 Color 2 Color 3

softlight(#ff6600, #ff0000);

Color 1 Color 2 Color 3

softlight(#ff6600, #00ff00);

Color 1 Color 2 Color 3

softlight(#ff6600, #0000ff);

Color 1 Color 2 Color 3

hardlight(@color1, @color2)

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

参数:

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

返回值:颜色 (color)

例如:

hardlight(#ff6600, #000000);

Color 1 Color 2 Color 3

hardlight(#ff6600, #333333);

Color 1 Color 2 Color 3

hardlight(#ff6600, #666666);

Color 1 Color 2 Color 3

hardlight(#ff6600, #999999);

Color 1 Color 2 Color 3

hardlight(#ff6600, #cccccc);

Color 1 Color 2 Color 3

hardlight(#ff6600, #ffffff);

Color 1 Color 2 Color 3

hardlight(#ff6600, #ff0000);

Color 1 Color 2 Color 3

hardlight(#ff6600, #00ff00);

Color 1 Color 2 Color 3

hardlight(#ff6600, #0000ff);

Color 1 Color 2 Color 3

difference(@color1, @color2)

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

参数:

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

返回值:颜色 (color)

例如:

difference(#ff6600, #000000);

Color 1 Color 2 Color 3

difference(#ff6600, #333333);

Color 1 Color 2 Color 3

difference(#ff6600, #666666);

Color 1 Color 2 Color 3

difference(#ff6600, #999999);

Color 1 Color 2 Color 3

difference(#ff6600, #cccccc);

Color 1 Color 2 Color 3

difference(#ff6600, #ffffff);

Color 1 Color 2 Color 3

difference(#ff6600, #ff0000);

Color 1 Color 2 Color 3

difference(#ff6600, #00ff00);

Color 1 Color 2 Color 3

difference(#ff6600, #0000ff);

Color 1 Color 2 Color 3

exclusion(@color1, @color2)

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

参数:

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

返回值:颜色 (color)

例如:

exclusion(#ff6600, #000000);

Color 1 Color 2 Color 3

exclusion(#ff6600, #333333);

Color 1 Color 2 Color 3

exclusion(#ff6600, #666666);

Color 1 Color 2 Color 3

exclusion(#ff6600, #999999);

Color 1 Color 2 Color 3

exclusion(#ff6600, #cccccc);

Color 1 Color 2 Color 3

exclusion(#ff6600, #ffffff);

Color 1 Color 2 Color 3

exclusion(#ff6600, #ff0000);

Color 1 Color 2 Color 3

exclusion(#ff6600, #00ff00);

Color 1 Color 2 Color 3

exclusion(#ff6600, #0000ff);

Color 1 Color 2 Color 3

average(@color1, @color2)

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

参数:

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

返回值:颜色 (color)

例如:

average(#ff6600, #000000);

Color 1 Color 2 Color 3

average(#ff6600, #333333);

Color 1 Color 2 Color 3

average(#ff6600, #666666);

Color 1 Color 2 Color 3

average(#ff6600, #999999);

Color 1 Color 2 Color 3

average(#ff6600, #cccccc);

Color 1 Color 2 Color 3

average(#ff6600, #ffffff);

Color 1 Color 2 Color 3

average(#ff6600, #ff0000);

Color 1 Color 2 Color 3

average(#ff6600, #00ff00);

Color 1 Color 2 Color 3

average(#ff6600, #0000ff);

Color 1 Color 2 Color 3

negation(@color1, @color2)

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

参数:

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

返回值:颜色 (color)

例如:

negation(#ff6600, #000000);

Color 1 Color 2 Color 3

negation(#ff6600, #333333);

Color 1 Color 2 Color 3

negation(#ff6600, #666666);

Color 1 Color 2 Color 3

negation(#ff6600, #999999);

Color 1 Color 2 Color 3

negation(#ff6600, #cccccc);

Color 1 Color 2 Color 3

negation(#ff6600, #ffffff);

Color 1 Color 2 Color 3

negation(#ff6600, #ff0000);

Color 1 Color 2 Color 3

negation(#ff6600, #00ff00);

Color 1 Color 2 Color 3

negation(#ff6600, #0000ff);

Color 1 Color 2 Color 3

转载注明地址:http://www.chengxuyuans.com/css/64758.html