Built-in functions supported by Less.

Edit the markdown source for "misc-functions"

color

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

参数: string: 代表颜色值的字符串。

返回: color

示例: color("#aaa");

输出: #aaa

convert

将数字从一种类型转换到另一种类型。

第一个参数为带单位的数值,第二个参数为单位。如果两个参数的单位是兼容的,则数字的单位被转换。如果两个参数的单位不兼容,则原样返回第一个参数。

无需转化改变单位参照 unit

兼容的单位组:

  • 长度: m, cm, mm, in, pt and pc,
  • 时间: s and ms,
  • 角度: rad, deg, grad and turn.

参数:

  • number: 带单位的浮点数。
  • identifier, string or escaped value: 单位

返回: number

示例:

convert(9s, "ms")
convert(14cm, mm)
convert(8, mm) // 不兼容的单位类型

输出:

9000ms
140mm
8

data-uri

将一个资源内嵌到样式文件,如果开启了ieCompat选项,而且资源文件的体积过大,或者是在浏览器中使用,则会使用url()进行回退。如果没有指定MIME,则Node.js会使用MIME包来决定正确的MIME。

参数:

  • mimetype: 可选参数,MIME类型字符串。
  • url: 需要内嵌的文件的URL。

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

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

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

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

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

default

只能边界条件中使用,没有匹配到其他自定义函数(mixin)的时候返回true,否则返回false

示例:

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

div {
  .mixin(3);
}

div.special {
  .mixin(1);
}

输出:

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

default的返回值还可以和边界操作一起使用。例如,.mixin() when not(default()) {},将会在至少一个除自身外的自定义函数(mixin)满足条件时被调用:

.mixin(@value) when (ispixel(@value)) {width: @value}
.mixin(@value) when not(default())    {padding: (@value / 5)}

div-1 {
  .mixin(100px);
}

div-2 {
  /* ... */
  .mixin(100%);
}

结果:

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

在同一个边界条件或者不同的混合条件中,default()可以被调用多次:

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

  .m(1); // OK
}

然而,使用default()时如果检测到多个混合条件有潜在性冲突,Less会抛出一个异常:

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

  .m(1); // Error
}

在以上的例子中,通过与其他条件的相互依赖就可以确认在调用时default()所返回的值。

更多default()的高级用法:

.x {
  .m(red)                                    {case-1: darkred}
  .m(blue)                                   {case-2: darkblue}
  .m(@x) when (iscolor(@x)) and (default())  {default-color: @x}
  .m('foo')                                  {case-1: I am 'foo'}
  .m('bar')                                  {case-2: I am 'bar'}
  .m(@x) when (isstring(@x)) and (default()) {default-string: and I am the default}

  &-blue  {.m(blue)}
  &-green {.m(green)}
  &-foo   {.m('foo')}
  &-baz   {.m('baz')}
}

结果:

.x-blue {
  case-2: #00008b;
}
.x-green {
  default-color: #008000;
}
.x-foo {
  case-1: I am 'foo';
}
.x-baz {
  default-string: and I am the default;
}

default函数只能作为Less构建函数在边界条件中使用。如果在混合条件之外使用,default函数只会被解释成普通的CSS属性值:

示例:

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

结果:

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

unit

移除或者改变属性值的单位。

参数:

  • dimension: 数字,带或不带单位。
  • unit: 可选参数,将要替换成的单位,如果省略则移除原单位。

转化成指定单位参照 convert

示例: unit(5, px)

输出: 5px

示例: unit(5em)

输出: 5


Edit the markdown source for "string-functions"

escape 转义函数

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

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

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

返回: 不带引号的转义字符串。

例如:

escape('a=1')

输出:

a%3D1

注意: 如果一个参数不是一个字符串, 输出是未定义.当前的实现是颜色返回undefined,其他种类参数原样输出,这种转义不可靠,将来也许会改变。

e 预判函数

Css 转义, 用~"值" 符号代替。

他认为字符串是一个参数返回不带引号的原内容。这可以用来输出一些Less并不认可的Css值,包括未验证的Css语法或者一个专有的语法。

参数: string - 用来转义的字符串.

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

例如:

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

输出:

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

注意: 该函数也接受 ~"" 转义值和数字做参数,其他类型参数会返回一个错误。

% 百分号格式化参数

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

第一个参数是带占位符的字符串. 所有占位符始于百分号%后跟字母s,S,d,D,a, or A. 剩下的参数是替换占位符的表达式. 如果你需要输出百分号, 用双百分号转义%%.

如果你需要把特殊字符转义成 utf-8转义码请使用大写字母占位符,该占位符会转义所有的特殊字符除了()'~!。空格会被转义成%20。小写字母占位符会保留特殊字符的原样。

占位符:

  • d, D, a, A - 能被任何类型参数替换 (颜色值, 数字, 转义值, 表达式, ...). 如果你在字符串中结合使用, 整个字符串参数都会替换进去 - 包括它的引号. 然后, 然后引号会被替换到字符串参数的原有位置, 也许会被转义或者还是不变的,取决于占位符是大写字母还是小写字母。
  • s, S - 能被除了颜色值以为任何类型参数替换. 如果你在字符串中结合使用, 只会替换成字符串参数的值,-而字符串参数引号都被忽略

参数:

  • string: 带占位符的格式化字符串,
  • anything* : 替换占位符的值.

返回: 格式化后的字符串 string.

例如:

format-a-d: %("repetitions: %a file: %d", 1 + 2, "directory/file.less");
format-a-d-upper: %('repetitions: %A file: %D', 1 + 2, "directory/file.less");
format-s: %("repetitions: %s file: %s", 1 + 2, "directory/file.less");
format-s-upper: %('repetitions: %S file: %S', 1 + 2, "directory/file.less");

输出:

format-a-d: "repetitions: 3 file: "directory/file.less"";
format-a-d-upper: "repetitions: 3 file: %22directory%2Ffile.less%22";
format-s: "repetitions: 3 file: directory/file.less";
format-s-upper: "repetitions: 3 file: directory%2Ffile.less";

replace 替换

用另一个字符串替换文本.

发布于 v1.7.0

参数:

  • string: 搜索和替换用的字符串.
  • pattern:一个字符串或者能搜索的正则表达式.
  • replacement: 匹配模式成功的替换字符串.
  • flags: (可选的) 正则表达式匹配标识(全匹配还是...).

返回: 替换过值后的字符串.

例如:

replace("Hello, Mars?", "Mars\?", "Earth!");
replace("One + one = 4", "one", "2", "gi");
replace('This is a string.', "(string)\.$", "new $1.");
replace(~"bar-1", '1', '2');

结果:

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

Edit the markdown source for "list-functions"

长度(length)

返回集合中的值的数目.

参数: list - 逗号或者空格隔开的值集合。 返回: 集合的值个数。

例如: length(1px solid #0080ff); 输出: 3

例如:

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

输出:

n: 4;

提取(extract)

返回集合中指定索引的值。

参数: list - 逗号或者空格隔开的值集合。 index - 用于返回集合中指定位置值的整型数字。 返回: 集合指定位置处的值。

例如: extract(8px dotted red, 2); 输出: dotted

例如:

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

输出:

value: coconut;

Edit the markdown source for "math-functions"

ceil

向上取整。

参数: number - 浮点数。

返回: integer

示例: ceil(2.4)

输出: 3

floor

向下取整。

参数: number - 浮点数。

返回: integer

示例: floor(2.6)

输出: 2

percentage

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

参数: number - 浮点数。

返回: string

示例: percentage(0.5)

输出: 50%

round

Applies rounding.

参数:

  • number: 浮点数。
  • decimalPlaces: 可选参数,四舍五入取整的小数点位置,默认值为0。

返回: number

示例: round(1.67)

输出: 2

示例: round(1.67, 1)

输出: 1.7

sqrt

计算一个数的平方根,原样保持单位。

参数: number - 浮点数。

返回: number

示例:

sqrt(25cm)

输出:

5cm

示例:

sqrt(18.6%)

输出:

4.312771730569565%;

abs

计算数字的绝对值,原样保持单位。

参数: number - 浮点数。

返回: number

示例 #1: abs(25cm)

输出: 25cm

示例 #2: abs(-18.6%)

输出: 18.6%;

sin

正弦函数。

处理时会将没有单位的数字认为是弧度值。

参数: number - 浮点数。

返回: number

示例:

sin(1); // 1弧度角的正弦值
sin(1deg); // 1角度角的正弦值
sin(1grad); // 1百分度角的正弦值

输出:

0.8414709848078965; // 1弧度角的正弦值
0.01745240643728351; // 1角度角的正弦值
0.015707317311820675; // 1百分度角的正弦值

asin

反正弦函数。

返回以弧度为单位的角度,区间在 -π/2π/2 之间。

参数: number - 区间在 [-1, 1] 之间的浮点数。

返回: number

示例:

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

输出:

-1rad
0rad
NaNrad

cos

余弦函数。

处理时会将没有单位的数字认为是弧度值。

参数: number - 浮点数。

返回: number

示例:

cos(1) // 1弧度角的余弦值
cos(1deg) // 1角度角的余弦值
cos(1grad) // 1百分度角的余弦值

输出:

0.5403023058681398 // 1弧度角的余弦值
0.9998476951563913 // 1角度角的余弦值
0.9998766324816606 // 1百分度角的余弦值

acos

反余弦函数。

返回以弧度为单位的角度,区间在 0π 之间。

参数: number - 区间在 [-1, 1] 之间的浮点数。

返回: number

示例:

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

输出:

1rad
0rad
NaNrad

tan

正切函数。

处理时会将没有单位的数字认为是弧度值。

参数: number - 浮点数。

返回: number

示例:

tan(1) // 1弧度角的正切值
tan(1deg) // 1角度角的正切值
tan(1grad) // 1百分度角的正切值

输出:

1.5574077246549023   // 1弧度角的正切值
0.017455064928217585 // 1角度角的正切值
0.015709255323664916 // 1百分度角的正切值

atan

反正切函数。

返回以弧度为单位的角度,区间在 -π/2π/2 之间。

参数: number - 浮点数。

返回: number

示例:

atan(-1.5574077246549023)
atan(0)
round(atan(22), 6) // 22四舍五入保留6位小数后的反正切值

输出:

-1rad
0rad
1.525373rad;

pi

返回 π (pi);

参数: none

返回: number

示例:

pi()

输出:

3.141592653589793

pow

乘方运算。

假设第一个参数为A,第二个参数为B,返回A的B次方。返回值与A有相同单位,B的单位被忽略。

参数:

  • number: 基数 - 浮点数。
  • number: 冪指数 - 浮点数。

返回: number

示例:

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

输出:

1cm
0.0016
5
NaN
NaN%

mod

取余运算。

假设第一个参数为A,第二个参数为B,返回A对B取余的结果。返回值与A有相同单位,B的单位被忽略。这个函数也可以处理负数和浮点数。

参数:

  • number: 浮点数。
  • number: 浮点数。

返回: number

示例:

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

输出:

NaNcm;
5cm
-1%;

min

最小值运算。

返回所有传入参数中的最小值。

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

返回: 最小值。

示例: min(5, 10);

输出: 5

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

输出: 1px

max

最大值运算。

返回所有传入参数中的最大值。

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

返回: the highest value.

示例: max(5, 10);

输出: 10

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

输出: 42%


Edit the markdown source for "type-functions"

函数(isnumber)

如果一个值是一个数字,返回'真(true)',否则返回'假(false)'.

参数: value - 待判断的值或变量.

返回: 若是数字返回真true,否则假false.

例如:

isnumber(#ff0);     // false
isnumber(blue);     // false
isnumber("string"); // false
isnumber(1234);     // true
isnumber(56px);     // true
isnumber(7.8%);     // true
isnumber(keyword);  // false
isnumber(url(...)); // false

函数(isstring)

如果一个值是一个字符串,返回'真(true)',否则返回'假(false)'.

参数: value - 待判断的值或变量.

返回: 若是字符串返回真true,否则假false.

例如:

isstring(#ff0);     // false
isstring(blue);     // false
isstring("string"); // true
isstring(1234);     // false
isstring(56px);     // false
isstring(7.8%);     // false
isstring(keyword);  // false
isstring(url(...)); // false

函数(iscolor)

如果一个值是一个颜色,返回'真(true)',否则返回'假(false)'.

参数: value - 待判断的值或变量.

返回: 若是颜色返回真true,否则假false.

例如:

iscolor(#ff0);     // true
iscolor(blue);     // true
iscolor("string"); // false
iscolor(1234);     // false
iscolor(56px);     // false
iscolor(7.8%);     // false
iscolor(keyword);  // false
iscolor(url(...)); // false

函数(iskeyword)

如果一个值是一个关键字,返回'真(true)',否则返回'假(false)'.

参数: value - 待判断的值或变量.

返回: 若是关键字返回真true,否则假false.

例如:

iskeyword(#ff0);     // false
iskeyword(blue);     // false
iskeyword("string"); // false
iskeyword(1234);     // false
iskeyword(56px);     // false
iskeyword(7.8%);     // false
iskeyword(keyword);  // true
iskeyword(url(...)); // false

函数(isurl)

如果一个值是一个url地址,返回'真(true)',否则返回'假(false)'.

参数: value - 待判断的值或变量.

返回: 若是url返回真'true',否则假'false'.

例如:

isurl(#ff0);     // false
isurl(blue);     // false
isurl("string"); // false
isurl(1234);     // false
isurl(56px);     // false
isurl(7.8%);     // false
isurl(keyword);  // false
isurl(url(...)); // true

函数(ispixel)

如果一个值是带像素长度单位的数字,返回'真(true)',否则返回'假(false)'.

参数: value - 待判断的值或变量.

返回: 若是带px单位的数字返回真true,否则假false.

例如:

ispixel(#ff0);     // false
ispixel(blue);     // false
ispixel("string"); // false
ispixel(1234);     // false
ispixel(56px);     // true
ispixel(7.8%);     // false
ispixel(keyword);  // false
ispixel(url(...)); // false

函数(isem)

如果一个值是带em长度单位的数字,返回'真(true)',否则返回'假(false)'.

参数: value - 待判断的值或变量.

返回: 若是带em单位的数字返回真true,否则假false.

例如:

isem(#ff0);     // false
isem(blue);     // false
isem("string"); // false
isem(1234);     // false
isem(56px);     // false
isem(7.8em);    // true
isem(keyword);  // false
isem(url(...)); // false

函数(ispercentage)

如果一个值是带百分比单位的数字,返回'真(true)',否则返回'假(false)'.

参数: value - 待判断的值或变量.

返回: 若是带百分比单位的数字返回真true,否则假false.

例如:

ispercentage(#ff0);     // false
ispercentage(blue);     // false
ispercentage("string"); // false
ispercentage(1234);     // false
ispercentage(56px);     // false
ispercentage(7.8%);     // true
ispercentage(keyword);  // false
ispercentage(url(...)); // false

函数(isunit)

如果一个值是带指定单位的数字,返回'真(true)',否则返回'假(false)'.

参数:

  • value - 待判断的值或变量.
  • unit - 用于测试比较的一个单位标示符.

返回: 若是带指定单位的数字返回真true,否则假false. 例如:

isunit(11px, px);  // true
isunit(2.2%, px);  // false
isunit(33px, rem); // false
isunit(4rem, rem); // true
isunit(56px, "%"); // false
isunit(7.8%, '%'); // true
isunit(1234, em);  // false
isunit(#ff0, pt);  // false
isunit("mm", mm);  // false

Edit the markdown source for "color-definition"

rgb(@red,@green,@blue)

通过十进制红色,绿色,蓝色三种值 (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(@red,@green,@blue,@alpha)

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

参数:

  • @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 !)。

这种格式被用在IE滤镜中,以及.NET和Android开发中。

参数: @color: 颜色对象(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色相值(hue),以及它自己的饱和度与亮度。

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) 创建不透明的颜色对象。

注意: HSV 与 HSL 不同,HSV是另一种在Photoshop中可用的色彩空间

参数:

  • @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) 创建透明的颜色对象。

注意:HSVAHSLA 不同,HSVA另一种在Photoshop中可用的色彩空间。

参数:

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

返回值: 颜色(color)

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

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


Edit the markdown source for "color-channel"

hue(@color)

从HSL色彩空间中提取颜色对象的色相值。

参数:@color - 颜色对象(a color object)

返回值: 整数 0-360

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

输出: 90

saturation(@color)

从HSL色彩空间中提取颜色对象的饱和度值。

参数: @color - 颜色对象(a color object)

返回值: 百分比 0-100

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

输出: 100%

lightness(@color)

从HSL色彩空间中提取颜色对象的亮度值。

参数: @color - 颜色对象(a color object)

返回值: 百分比 0-100

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

输出: 50%

hsvhue(@color)

从HSV色彩空间中提取颜色对象的色相值。

参数: @color - 颜色对象(a color object)

返回值: 整数 0-360

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

输出: 90

hsvsaturation(@color)

从HSV色彩空间中提取颜色对象的饱和度值。

参数: @color - 颜色对象(a color object)

返回值: 百分比 0-100

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

输出: 100%

hsvvalue(@color)

从色彩空间中提取颜色对象的色调值。

参数: @color - 颜色对象(a color object)

返回值: 百分比 0-100

例如: hsvvalue(hsv(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)

提取颜色对象的透明度值。

参数: @color - 颜色对象(a color object)

返回值: 浮点数 0-1

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

输出: 0.5

luma(@color)

计算颜色对象luma的值(亮度的百分比表示法)。

使用在WCAG 2.0中定义的SMPTE C / Rec. 709 coefficients。 这个计算公式也用在 contrast() 函数中。

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

参数: @color - 颜色对象(a color object)

返回值: 百分比 0-100%

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

Output: 44%

luminance

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

Parameters: color - a color object.

Returns: percentage 0-100%

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

输出: 65%


Edit the markdown source for "color-operations"

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

saturate(@color,@amount)

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

参数:

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

返回值: 颜色(color)

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

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

Color 1Color 2

desaturate(@color,@amount)

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

参数:

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

返回值: 颜色(color)

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

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

Color 1Color 2

lighten(@color,@amount)

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

参数:

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

返回值: 颜色(color)

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

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

Color 1Color 2

darken(@color,@amount)

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

参数:

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

返回值: 颜色(color)

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

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

Color 1Color 2

fadein(@color,@amount)

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

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

参数:

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

返回值: 颜色(color)

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

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

fadeout(@color,@amount)

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

对不透明的颜色无效。如果要增加颜色的透明度,使用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,@amount)

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

参数:

  • @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,@amount)

任意方向旋转颜色的色相角度 (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%), 30)
spin(hsl(10, 90%, 50%), -30)

输出:

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

Color 1Color 2

Color 1Color 2

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

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

参数:

  • @color1: 颜色对象(A color object)
  • @color2: 颜色对象(A color object)
  • @weight: 可选项:平衡两种颜色的百分比, 默认 50%。

返回值: 颜色(color)

例如:

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

输出:

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

Color 1 + Color 2Color 3

greyscale(@color)

完全移除颜色的饱和度,与 desaturate(@color, 100%) 函数效果相同。

因为颜色的饱和度不受色相值影响,所以输出的颜色会稍显暗淡 (dull or muddy);如果使用luma值可能会有更好的结果,因为它提取的是百分比亮度,而不是线性亮度。比如greyscale('#0000ff')greyscale('#00ff00')会得出相同的结果,尽管对人眼来说,它们的亮度是不一样的。

参数: @color: 颜色对象(A color object)

返回值: 颜色(color)

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

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

Color 1Color 2

注意:即便它们的亮度值(lightness value)一样,但是生成的灰色看起来比原来的绿色更暗些。

luma相比较(因为luma返回一个单独的值,而不是颜色,所以它们的用法不一样):

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

输出: #cacaca

Color 1Color 2

实际上灰色的值跟高些,但是灰色的亮度值跟绿色的看起来大致上相同。

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

选择两种颜色相比较,得出哪种颜色的对比度最大就倾向于对比度最大的颜色。

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

@light@dark 两个参数可以调换顺序。因为contrast()函数会自动计算它们的luma值和自动分配@light@dark,这样你就不用通过颠倒两个参数的顺序才能选到最小对比度颜色(the least contrasting color)。

参数:

  • @color: 需要对比的颜色对象 (A color object to compare against.)
  • @dark: 可选项 – 指定的黑色(默认 black)
  • @light: 可选项 – 指定的白色(默认 white)
  • @threshold: 可选项 – 百分比 0-100% 界定深色过渡到浅色的转变位置(默认 43%),这个数值决定了输出结果偏向于哪一方,比如判断 50% 的灰色背景应该显示白色还是黑色的文字。一般来说,如果本色方案偏浅,则应该设低一点,否则设高一点。

返回值: 颜色(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 // 黑色
#ffffff // 白色
#dddddd
#000000 // 黑色
#ffffff // 白色

这些例子是利用计算颜色的值作为背景色和前景色。正如你所见,即便可能使用阈值允许得出更低对比度的颜色,但是不可能白衬白结束,也不可能黑衬黑结束。如最后一个例子:

Color 1 Color 1 Color 1 Color 1 Color 1


Edit the markdown source for "color-blending"

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

multiply(@color1,@color2)

分别将两种颜色的红绿蓝 (RGB) 三种值做乘法运算,然后再除以255,输出结果是更深的颜色。(译注:对应Photoshop中的“变暗/正片叠底”。)

参数:

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

返回值: 颜色(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() 函数效果相反,输出结果是更亮的颜色。(译注:对应Photoshop中的“变亮/滤色”。)

参数:

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

返回值: 颜色(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() 两个函数的效果,令浅的颜色变得更浅,深的颜色变得更深。(译注:对应Photoshop中的“叠加”。)注意:输出结果由第一个颜色参数决定。

参数:

  • @color1: 颜色对象,是用于叠加的颜色,也是结果是更亮还是更暗的决定因素。
  • @color2: 颜色对象,被叠加的颜色。

返回值: 颜色(color)

例如:

overlay(#ff6600, #000000);

Color 1 Color 2 Color 3

overlay(#ff6600, #333333);

Color 1 Color 2 Color 3

overlay(#ff6600, #666666);

Color 1 Color 2 Color 3

overlay(#ff6600, #999999);

Color 1 Color 2 Color 3

overlay(#ff6600, #cccccc);

Color 1 Color 2 Color 3

overlay(#ff6600, #ffffff);

Color 1 Color 2 Color 3

overlay(#ff6600, #ff0000);

Color 1 Color 2 Color 3

overlay(#ff6600, #00ff00);

Color 1 Color 2 Color 3

overlay(#ff6600, #0000ff);

Color 1 Color 2 Color 3

softlight(@color1,@color2)

overlay() 函数效果相似,只是当纯黑色或纯白色作为参数时输出结果不会是纯黑色或纯白色。(译注:对应Photoshop中的“柔光”。)

参数:

  • @color1: 混合色(光源)
  • @color2: 被混合的颜色

返回值: 颜色(color)

例如:

softlight(#ff6600, #000000);

Color 1 Color 2 Color 3

softlight(#ff6600, #333333);

Color 1 Color 2 Color 3

softlight(#ff6600, #666666);

Color 1 Color 2 Color 3

softlight(#ff6600, #999999);

Color 1 Color 2 Color 3

softlight(#ff6600, #cccccc);

Color 1 Color 2 Color 3

softlight(#ff6600, #ffffff);

Color 1 Color 2 Color 3

softlight(#ff6600, #ff0000);

Color 1 Color 2 Color 3

softlight(#ff6600, #00ff00);

Color 1 Color 2 Color 3

softlight(#ff6600, #0000ff);

Color 1 Color 2 Color 3

hardlight(@color1,@color2)

overlay() 函数效果相似,不过由第二个颜色参数决定输出颜色的亮度或黑度,而不是第一个颜色参数决定。(译注:对应Photoshop中的“强光/亮光/线性光/点光”。)

参数:

  • @color1: 混合色(光源)
  • @color2: 颜色对象,用于叠加颜色,也是结果是更亮还是更暗的决定因素。

返回值: 颜色(color)

例如:

hardlight(#ff6600, #000000);

Color 1 Color 2 Color 3

hardlight(#ff6600, #333333);

Color 1 Color 2 Color 3

hardlight(#ff6600, #666666);

Color 1 Color 2 Color 3

hardlight(#ff6600, #999999);

Color 1 Color 2 Color 3

hardlight(#ff6600, #cccccc);

Color 1 Color 2 Color 3

hardlight(#ff6600, #ffffff);

Color 1 Color 2 Color 3

hardlight(#ff6600, #ff0000);

Color 1 Color 2 Color 3

hardlight(#ff6600, #00ff00);

Color 1 Color 2 Color 3

hardlight(#ff6600, #0000ff);

Color 1 Color 2 Color 3

difference(@color1,@color2)

从第一个颜色值中减去第二个(分别计算 RGB 三种颜色值),输出结果是更深的颜色。(译注:对应Photoshop中的“差值/排除”。)

参数:

  • @color1: 被减的颜色对象
  • @color2: 减去的颜色对象

返回值: 颜色(color)

例如:

difference(#ff6600, #000000);

Color 1 Color 2 Color 3

difference(#ff6600, #333333);

Color 1 Color 2 Color 3

difference(#ff6600, #666666);

Color 1 Color 2 Color 3

difference(#ff6600, #999999);

Color 1 Color 2 Color 3

difference(#ff6600, #cccccc);

Color 1 Color 2 Color 3

difference(#ff6600, #ffffff);

Color 1 Color 2 Color 3

difference(#ff6600, #ff0000);

Color 1 Color 2 Color 3

difference(#ff6600, #00ff00);

Color 1 Color 2 Color 3

difference(#ff6600, #0000ff);

Color 1 Color 2 Color 3

exclusion(@color1,@color2)

效果与 difference() 函数效果相似,只是输出结果差别更小 (lower contrast)。(译注:对应Photoshop中的“差值/排除”。)

参数:

  • @color1: 被减的颜色对象
  • @color2: 减去的颜色对象

返回值: 颜色(color)

例如:

exclusion(#ff6600, #000000);

Color 1 Color 2 Color 3

exclusion(#ff6600, #333333);

Color 1 Color 2 Color 3

exclusion(#ff6600, #666666);

Color 1 Color 2 Color 3

exclusion(#ff6600, #999999);

Color 1 Color 2 Color 3

exclusion(#ff6600, #cccccc);

Color 1 Color 2 Color 3

exclusion(#ff6600, #ffffff);

Color 1 Color 2 Color 3

exclusion(#ff6600, #ff0000);

Color 1 Color 2 Color 3

exclusion(#ff6600, #00ff00);

Color 1 Color 2 Color 3

exclusion(#ff6600, #0000ff);

Color 1 Color 2 Color 3

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: 被减的颜色对象
  • @color2: 减去的颜色对象

返回值: 颜色(color)

例如:

negation(#ff6600, #000000);

Color 1 Color 2 Color 3

negation(#ff6600, #333333);

Color 1 Color 2 Color 3

negation(#ff6600, #666666);

Color 1 Color 2 Color 3

negation(#ff6600, #999999);

Color 1 Color 2 Color 3

negation(#ff6600, #cccccc);

Color 1 Color 2 Color 3

negation(#ff6600, #ffffff);

Color 1 Color 2 Color 3

negation(#ff6600, #ff0000);

Color 1 Color 2 Color 3

negation(#ff6600, #00ff00);

Color 1 Color 2 Color 3

negation(#ff6600, #0000ff);

Color 1 Color 2 Color 3