hue
值(色相)saturation
值(饱和度)hue
值,以HSV色彩空间表示(色相)saturation
值,以HSV色彩空间表示(饱和度)value
值,以HSV色彩空间表示(色调)含*号的函数只在1.4.0 beta以上版本中可用css
使用URL-encoding的方式编码字符串。浏览器
如下字符不会被编码:,
/ /
/ ?
/ @
/ &
/ +
/ '
/ ~
/ !
/ $
。less
最多见的被编码的字符串包括: /
#
/ ^
/ (
/ )
/ {
/ }
/ |
/ :
/ >
/ <
/ ;
/ ]
/ [
/ =
。编辑器
参数:函数
返回值:字符串 (string)编码
例如:url
escape('a=1')
输出:spa
a%3D1
注意:若是参数不是字符串的话,函数行为是不可预知的。目前传入颜色值的话会返回
undefined
,其它的值会原样返回。写代码时不该该依赖这个特性,并且这个特性在将来有可能改变。3d
用于对CSS的转义,与~"value"
相似。它接受一个字符串做为参数,并原样返回内容(不含引号)。它可用于输出一些不合法的CSS语法,或者是使用LESS不能识别的属性。code
参数:
返回值:字符串的内容,不含引号
例如:
filter:e("ms:alwaysHasItsOwnSyntax.For.Stuff()");
输出:
filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
注意:也接受经
~""
转义的值或者是数字做为参数。其它的值将产生错误。
%("format", arguments ...)
将会格式化字符串。第一个参数是一个包含占位符的字符串。占位符以百分号%
开头,后面接字母s
/ S
/ d
/ D
/ a
/ A
。后续的参数用于替换这些占位符。若是你须要输出百分号,能够多用一个百分号来转义%%
。
使用大写的占位符能够将特殊字符按照UTF-8进行转义,函数将会对全部的特殊字符进行转义,除了(
/ )
/ '
/~
/!
。空格会被转义为%20
。小写的占位符将原样保持特殊字符,不进行转义。
占位符说明:d
/ D
/ a
/ A
能够被任意类型的参数替换(颜色、数字、转义的字符串、表达式等)。若是将它们和字符串一块儿使用,则整个字符串都会被使用,包含引号。可是,引号将会原样放在字符串中,不会被转义。s
/ S
能够被除了颜色的以外的任何类型参数替换。若是你将它们和字符串一块儿使用,则只有字符串的值会被使用,引号会被忽略。
参数:
返回值:格式化后的字符串
例如:
a
/d
格式化:%("repetitions: %a file: %d", 1 + 2, "directory/file.less");
a
/d
格式化:%('repetitions: %A file: %D', 1 + 2, "directory/file.less");
s
格式化:%("repetitions: %s file: %s", 1 + 2, "directory/file.less");
s
格式化:%('repetitions: %S file: %S', 1 + 2, "directory/file.less");
分别输出以下:
a
/d
格式化:"repetitions: 3 file: "directory/file.less"";
a
/d
格式化:"repetitions: 3 file: %22directory%2Ffile.less%22";
s
格式化:"repetitions: 3 file: directory/file.less";
s
格式化:"repetitions: 3 file: directory%2Ffile.less";
解析颜色,将表明颜色的字符串转换为颜色值,参数必须是16进制表示的颜色或者缩写写法。
参数:
例如:
color("#445566") color(~"#123")
输出:
#445566 #112233
移除或替换属性值 (dimension) 的单位。
参数:
例如:
unit(5, px)
输出:
5px
例如:
unit(5em)
输出:
5
将一个资源使用BASE64编码嵌入到样式文件,若是开启了ieCompat
选项,并且资源文件的体积过大或者是在浏览器中使用,则会使用url()
进行回退。若是没有指定MIME,则Node.js会使用MIME包来决定正确的MIME。
参数:
例如:
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==');
向上取整。
参数:
返回值:向上取整后的整数
例如:
ceil(2.4)
输出:
3
向下取整。
参数:
例如:
floor(2.6)
输出:
2
将浮点数转换为百分比字符串。
参数:
返回值:字符串
例如:
percentage(0.5)
输出:
50%
四舍五入取整。
参数:
返回值:数字 (number)
例如:
round(1.67)
输出:
2
例如:
round(1.67, 1)
输出:
1.7
计算一个数的平方根,原样保持单位。
参数:
返回值:数字,平方根
例如:
sqrt(25cm)
输出:
5cm
例如:
sqrt(18.6%)
输出:
4.312771730569565%;
计算数字的绝对值,原样保持单位。
参数:
返回值:数字,绝对值
例如:
abs(25cm)
输出:
25cm
例如:
abs(-18.6%)
输出:
18.6%
正弦函数,处理时会将没有单位的数字认为是弧度值。
参数:
例如:
sin(1); // 1弧度角的正弦值 sin(1deg); // 1角度角的正弦值 sin(1grad); // 1百分度角的正弦值
分别输出:
0.8414709848078965; 0.01745240643728351; 0.015707317311820675;
百分度是将一个圆周分为400份,每份为一个百分度,英文gradian,简写grad。见http://zh.wikipedia.org/zh/%E7%99%BE%E5%88%86%E5%BA%A6。
反正弦函数,返回以弧度为单位的角度,区间在 -PI/2 到 PI/2之间。
参数:
例如:
asin(-0.8414709848078965) asin(0) asin(2)
分别输出:
-1rad 0rad NaNrad
有关反三角函数的知识能够参见http://zh.wikipedia.org/zh/%E5%8F%8D%E4%B8%89%E8%A7%92%E5%87%BD%E6%95%B0,下同。
余弦函数,处理时会将没有单位的数字认为是弧度值。
参数:
例如:
cos(1); // 1弧度角的余弦值 cos(1deg); // 1角度角的余弦值 cos(1grad); // 1百分度角的余弦值
分别输出:
0.5403023058681398 0.9998476951563913 0.9998766324816606
反余弦函数,返回以弧度为单位的角度,区间在 0 到 PI之间。
参数:
例如:
acos(0.5403023058681398) acos(1) acos(2)
分别输出:
1rad 0rad NaNrad
正切函数,处理时会将没有单位的数字认为是弧度值。
参数:
例如:
sin(1); // 1弧度角的正切值 sin(1deg); // 1角度角的正切值 sin(1grad); // 1百分度角的正切值
分别输出:
1.5574077246549023 0.017455064928217585 0.015709255323664916
反正切函数,返回以弧度为单位的角度,区间在 -PI/2 到 PI/2之间。
参数:
例如:
atan(-1.5574077246549023) atan(0) round(atan(22), 6) // 四舍五入输出6位小数
分别输出:
-1rad 0rad 1.525373rad;
返回圆周率PI。
参数:无
返回值:数字,圆周率
例如:
pi()
输出:
3.141592653589793
假设第一个参数为A,第二个参数为B,返回A的B次方。返回值与A有相同的单位,B的单位被忽略。
参数:
返回值:数字,基数的冪指数次方
例如:
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(0cm, 0px) mod(11cm, 6px); mod(-26%, -5);
输出:
NaNcm; 5cm -1%;
将数字从一种类型转换到另外一种类型。第一个参数为带单位的数值,第二个参数为单位。若是两个参数的单位是兼容的,则数字的单位被转换。若是两个参数的单位不兼容,则原样返回第一个参数。
兼容的单位组:
m
/ cm
/ mm
/ in
/ pt
/ pc
s
/ ms
rad
/ deg
/ grad
/ turn
grad为“百分度”,见正弦函数下的说明。turn为“圈/周”的意思,1turn为360度。
参数:
返回值:转换单位后的数值
例如:
convert(9s, "ms") convert(14cm, mm) convert(8, mm) // 不兼容的单位
输出:
9000ms 140mm 8
返回带不一样单位的数值。只有单位被改变,数值自己不会被转换。函数会假设第二个参数带上了合法单位。
参数:
返回值:带单位的数值
例如:
unit(9s, ~"ms") unit(-9, m)
输出:
9ms -9m
见“综合函数”部分
经过十进制红色,绿色,蓝色三种值 (RGB) 建立不透明的颜色对象。在 HTML/CSS 中也会用文本颜色值 (literal color values) 定义颜色,例如 red -> #ff0000
。
参数:
返回值:颜色 (color)
例如:
rgb(90, 129, 32)
输出:
#5a8120
经过十进制红色,绿色,蓝色,以及 alpha 四种值 (RGBA) 建立带alpha透明的颜色对象。
参数:
返回值:颜色 (color)
例如:
rgba(90, 129, 32, 0.5)
输出:
rgba(90, 129, 32, 0.5)
建立格式为 #AARRGGBB 的十六进制 (hex representation) 颜色 (注意不是 #RRGGBBAA !)。这种格式被用在IE滤镜中,以及.NET和Android开发中。
参数:
返回值:字符串 (string)
例如:
argb(rgba(90, 23, 148, 0.5));
输出:
#805a1794
经过色相 (hue),饱和度 (saturation),亮度 (lightness) 三种值 (HSL) 建立不透明的颜色对象。
参数:
返回值:颜色 (color)
例如:
hsl(90, 100%, 50%)
输出:
#80ff00
当你想使用一种颜色来建立另外一种颜色时很方便,如:
@new: hsl(hue(@old), 45%, 90%);
@new 将使用 @old 的 色相值,以及它本身的饱和度与亮度。
经过色相 (hue),饱和度 (saturation),亮度 (lightness),以及 alpha 四种值 (HSLA) 建立透明的颜色对象。
参数:
返回值:颜色 (color)
例如:
hsl(90, 100%, 50%, 0.5)
输出:
rgba(128, 255, 0, 0.5)
经过色相 (hue),饱和度 (saturation),色调 (value) 三种值 (HSV) 建立不透明的颜色对象。注意与 HSL 不一样,这是另外一种在Photoshop中可用的色彩空间。
参数:
返回值:颜色 (color)
例如:
hsv(90, 100%, 50%)
输出:
#408000
经过色相 (hue),饱和度 (saturation),色调 (value),以及 alpha 四种值 (HSVA) 建立透明的颜色对象。注意与 HSLA 不一样,这是另外一种在Photoshop中可用的色彩空间。
参数:
返回值:颜色 (color)
例如:
hsva(90, 100%, 50%, 0.5)
输出:
rgba(64, 128, 0, 0.5)
从颜色对象中提取色相值。
参数:
返回值:整数,范围从0-360
例如:
hue(hsl(90, 100%, 50%))
输出:
90
从颜色对象中提取饱和度值。
参数:
返回值:百分比值 0-100
例如:
saturation(hsl(90, 100%, 50%))
输出:
100%
从颜色对象中提取亮度值。
参数:
返回值:百分比值 0-100
例如:
lightness(hsl(90, 100%, 50%))
输出:
50%
以HSV色彩空间提取颜色中的色相值。
参数:
返回:整数,范围为0-360
例如:
hsvhue(hsv(90, 100%, 50%))
输出:
90
以HSV色彩空间提取颜色中的饱和度值。
参数:
返回值:百分比,范围0-100
例如:
hsvsaturation(hsv(90, 100%, 50%))
输出:
100%
以HSV色彩空间提取颜色中的色调值。
参数:
返回:百分比,范围为0-100
例如:
hsvvalue(hsv(90, 100%, 50%))
输出:
50%
从颜色对象中提取红色值。
参数:
返回值:整数 0-255
例如:
red(rgb(10, 20, 30))
输出:
10
从颜色对象中提取绿色值。
参数:
返回值:整数 0-255
例如:
green(rgb(10, 20, 30))
输出:
20
从颜色对象中提取蓝色值。
参数:
返回值:整数 0-255
例如:
blue(rgb(10, 20, 30))
输出:
30
从颜色对象中提取 alpha 值。
参数:
返回值:浮点数,介于 0-1 之间
例如:
alpha(rgba(10, 20, 30, 0.5))
输出:
0.5
计算颜色对象的 luma 值(亮度的百分比表示法)。使用在WCAG2.0中定义的SMPTE C / Rec. 709 coefficients。 这个计算公式也用在 contrast()
函数中。
参数:
返回值:百分比 0-100%
例如:
luma(rgb(100, 200, 30))
输出:
65%
颜色值运算有几点注意事项:参数必须单位/格式相同;百分比将做为绝对值处理,好比 10% 增长 10%,结果是 20% 而不是 11%;参数值只能在限定的范围内;they do not wrap around (这一句不清楚意思,多是指参数值不会在超过范围后自动从另外一侧“穿越”回去。)。返回值时,除了十六进制的颜色值 (hex versions) 外将对其余格式作简化处理。
增长必定数值的颜色饱和度。
参数:
返回值:颜色 (color)
例如:
saturate(hsl(90, 90%, 50%), 10%)
输出:
#80ff00 // hsl(90, 100%, 50%)
下降必定数值的颜色饱和度。
参数:
返回值:颜色 (color)
例如:
desaturate(hsl(90, 90%, 50%), 10%)
输出:
#80e51a // hsl(90, 80%, 50%)
增长必定数值的颜色亮度。
参数:
返回值:颜色 (color)
例如:
lighten(hsl(90, 90%, 50%), 10%)
输出:
#99f53d // hsl(90, 90%, 60%)
下降必定数值的颜色亮度。
参数:
返回值:颜色 (color)
例如:
darken(hsl(90, 90%, 50%), 10%)
输出:
#66c20a // hsl(90, 90%, 40%)
下降颜色的透明度(或增长不透明度),令其更不透明,对不透明的颜色无效。若是要增长颜色的透明度,使用 fadeout()
函数。
参数:
返回值:颜色 (color)
例如:
fadein(hsla(90, 90%, 50%, 0.5), 10%)
输出:
rgba(128, 242, 13, 0.6) // hsla(90, 90%, 50%, 0.6)
增长颜色的透明度(或下降不透明度),令其更透明,对不透明的颜色无效。若是要增长颜色的透明度,使用 fadein() 函数。
参数:
返回值:颜色 (color)
例如:
fadeout(hsla(90, 90%, 50%, 0.5), 10%)
输出:
rgba(128, 242, 13, 0.4) // hsla(90, 90%, 50%, 0.6)
给颜色(包括不透明的颜色)设定必定数值的透明度。
参数:
返回值:颜色 (color)
例如:
fade(hsl(90, 90%, 50%), 10%)
输出:
rgba(128, 242, 13, 0.1) //hsla(90, 90%, 50%, 0.1)
向任意方向旋转颜色的色相角度 (hue angle),旋转范围 0-360,超过一周后将从起点开始继续旋转(+ - 控制方向),好比旋转 360 度与 720 度是相同的结果。须要注意的是,颜色值会经过 RGB 格式转换,这个过程不能保留灰色的色相值(灰色没有饱和度,色相值也就没有意义了),所以要肯定使用函数的方法可以保留颜色的色相值,例如不要这样使用函数:
@c: saturate(spin(#aaaaaa, 10), 10%);
而应该用这种方法代替:
@c: spin(saturate(#aaaaaa, 10%), 10);
由于颜色值永远输出为 RGB 格式,所以 spin()
函数对灰色无效。
参数:
返回值:颜色 (color)
例如:
spin(hsl(10, 90%, 50%), 20) spin(hsl(10, 90%, 50%), -20)
输出:
#f27f0d // hsl(30, 90%, 50%) #f20d33 // hsl(350, 90%, 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)
彻底移除颜色的饱和度,与 desaturate(@color, 100%)
函数效果相同。由于颜色的饱和度不受色相值影响,因此输出的颜色会稍显暗淡 (dull or muddy);若是使用luma
值可能会有更好的结果,由于它提取的是百分比亮度,而不是线性亮度。好比greyscale('#0000ff')
与greyscale('#00ff00')
会得出相同的结果,尽管对人眼来讲,它们的亮度是不同的。
参数:
返回值:颜色 (color)
例如:
greyscale(hsl(90, 90%, 50%))
输出:
#808080 // hsl(90, 0%, 50%)
这个函数对比 @background 的 luma 值与 @threshold 参数的大小,若是大于输出 @darkcolor, 小于则输出 @lightcolor,便于选择相对于背景更容易阅读的颜色,同时提升了使用颜色的灵活性,与 Compass 的contrast()
函数 工做方式相同。根据 WCAG 2.0 应该对比颜色的 luma 值,而不是亮度值 (lightness)。
参数:
返回值:颜色 (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
颜色混合的方式与图像编辑器 Photoshop, Firework 或者 GIMP 的图层混合模式 (layer blending modes) 类似,所以制做 .psd 文件时处理颜色的方法能够一样用在 CSS 中。
分别将两种颜色的红绿蓝 (RGB) 三种值作乘法运算,而后再除以 255,输出结果是更深的颜色。(译注:对应Photoshop中的“变暗/正片叠底”。)
参数:
返回值:颜色 (color)
与 multiply() 函数效果相反,输出结果是更亮的颜色。(译注:对应Photoshop中的“变亮/滤色”。)
参数:
返回值:颜色 (color)
结合 multiply() 与 screen() 两个函数的效果,令浅的颜色变得更浅,深的颜色变得更深。(译注:对应Photoshop中的“叠加”。)注意:输出结果由第一个颜色参数决定。
参数:
返回值:颜色 (color)
与 overlay() 函数效果类似,只是当纯黑色或纯白色做为参数时输出结果不会是纯黑色或纯白色。(译注:对应Photoshop中的“柔光”。)
参数:
返回值:颜色 (color)
与 overlay() 函数效果类似,不过由第二个颜色参数决定输出颜色的亮度或黑度,而不是第一个颜色参数决定。(译注:对应Photoshop中的“强光/亮光/线性光/点光”。)
参数:
返回值:颜色 (color)
从第一个颜色值中减去第二个(分别计算 RGB 三种颜色值),输出结果是更深的颜色。(译注:对应Photoshop中的“差值/排除”。)
参数:
返回值:颜色 (color)
效果与 difference() 函数效果类似,只是输出结果差异更小 (lower contrast)。(译注:对应Photoshop中的“差值/排除”。)
参数:
分别对 RGB 的三种颜色值取平均值,而后输出结果。
参数:
返回值:颜色 (color)
与 difference()
函数效果相反,输出结果是更亮的颜色。请注意:效果相反不表明作加法运算。
参数:
返回值:颜色 (color)