文章目录
  1. 1. 杂项函数
    1. 1.1. color
    2. 1.2. convert
    3. 1.3. data-uri
    4. 1.4. default
    5. 1.5. unit
  2. 2. 字符串函数
    1. 2.1. escape转义函数
    2. 2.2. e预判函数
    3. 2.3. %格式化
    4. 2.4. replace
  3. 3. 列表函数
    1. 3.1. length
    2. 3.2. extract
  4. 4. 数学函数
    1. 4.1. ceil
    2. 4.2. floor
    3. 4.3. percentage
    4. 4.4. round
    5. 4.5. sqrt
    6. 4.6. abs
    7. 4.7. sin
    8. 4.8. asin
    9. 4.9. pi
    10. 4.10. pow
    11. 4.11. mod
    12. 4.12. min
    13. 4.13. max
  5. 5. 类型函数
    1. 5.1. isnumber
    2. 5.2. isstring
    3. 5.3. iscolor
    4. 5.4. iskeyword
    5. 5.5. isurl
    6. 5.6. ispixel
    7. 5.7. isem
    8. 5.8. ispercentage
    9. 5.9. isunit
  6. 6. 颜色定义函数
    1. 6.1. rgb(@red,@green,@blue)
    2. 6.2. rgba(@red,@green,@blue,@alpha)
    3. 6.3. argb(@color)
    4. 6.4. hsl(@hue,@saturation,@lightness)
    5. 6.5. hsla(@hue,@saturation,@lightness,@alpha)
    6. 6.6. hsv(@hue,@saturation,@value)
    7. 6.7. hsva(@hue,@saturation,@value,@alpha)
  7. 7. 颜色通道函数
    1. 7.1. hue(@color)
    2. 7.2. saturation(@color)
    3. 7.3. lightness(@color)
    4. 7.4. hsvhue(@color)
    5. 7.5. hsvsaturation(@color)
    6. 7.6. hsvvalue(@color)
    7. 7.7. red(@color)
    8. 7.8. green(@color)
    9. 7.9. blue(@color)
    10. 7.10. alpha(@color)
    11. 7.11. luma(@color)
    12. 7.12. luminance(@color)
  8. 8. 颜色操作函数
    1. 8.1. saturation(@color,@amount)
    2. 8.2. desaturation(@color,@amount)
    3. 8.3. lighten(@color,@amount)
    4. 8.4. darken(@color,@amount)
    5. 8.5. fadein(@color,@amount)
    6. 8.6. fadeout(@color,@amount)
    7. 8.7. fade(@color,@amount)
    8. 8.8. spin(@color,@amount)
    9. 8.9. mix(@color1,@color2,[@weight:50%])
    10. 8.10. greyscale(@color)
    11. 8.11. contrast(@background,[@darkcolor:black],[@lightcolor:white],[@threshold:43%])
  9. 9. 颜色混合函数
    1. 9.1. multiply(@color1,@color2)
    2. 9.2. screen(@color1,@color2)
    3. 9.3. overlay(@color1,@color2)
    4. 9.4. softlight(@color1,@color2)
    5. 9.5. hardlight(@color1,@color2)
    6. 9.6. difference(@color1,@color2)
    7. 9.7. exclusion(@color1,@color2)
    8. 9.8. average(@color1,@color2)
    9. 9.9. negation(@color1,@color2)

介绍完Less的语言特性之后,现在我们就开始介绍Less的内置函数。主要包括:

  1. 杂项函数
  2. 字符串函数
  3. 列表函数
  4. 数学函数
  5. 类型函数
  6. 颜色相关函数

杂项函数

color

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

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

返回: color

示例:

color("#aaa")     =>#aaa

convert

将数字从一种类型转换到另一种类型。第一个参数为带单位的数值,第二个参数为单位。如果两个参数的单位是兼容的(时间、长度、角度等),则数字的单位被转换。如果两个参数的单位不兼容,则原样返回第一个参数。

参数:

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

返回: number

示例:

convert(14cm, mm)                    =>140mm
convert(8, mm) // 不兼容的单位类型     =>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。

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

unit

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

参数:

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

示例:

unit(5, px)       =>5px
unit(5em)         =>5

字符串函数

escape转义函数

对字符串中的特殊字符做 URL-encoding 编码。

这些字符不会被编码:,, /, ?, @, &, +, ', ~, ! and $。
被编码的字符是:\<space\>, #, ^, (, ), {, }, |, :, >, <, ;, ], [ and =。

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

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

示例:

escape('a=1')   =>a%3D1

e预判函数

用于对 CSS 的转义,已经由 ~”value” 语法代替。它接受一个字符串作为参数,并原样返回内容,不含引号。它可用于输出一些不合法的 CSS 语法,或者是使用 LESS 不能识别的属性。

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

返回值: string - 转义后的字符串,不含引号

示例:

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

%格式化

此函数 %(string, arguments …) 用于格式化字符串。

第一个参数是一个包含占位符的字符串。占位符以百分号 % 开头,后面跟着字母 s、S、d、D、a 或 A。后续的参数用于替换这些占位符。如果你需要输出百分号,可以多用一个百分号来转义 %%。

使用大写的占位符可以将特殊字符按照 UTF-8 编码进行转义。 此函数将会对所有的特殊字符进行转义,除了 ()’~! 。空格会被转义为 %20 。小写的占位符将原样输出特殊字符,不进行转义。

占位符说明:

  1. d, D, a, A - 以被任意类型的参数替换 (颜色、数字、转义后的字符串、表达式等)。如果将它们和字符串一起使用,则整个字符串都会被使用,包括引号。然而,引号将会按原样放在字符串中,不会用 “/“ 或类似的方式转义。
  2. s, S - 可以被除了颜色的之外的任何类型参数替换。如果你将它们和字符串一起使用,则只有字符串的值会被使用,引号会被忽略。

参数:

string: 有占位符的格式化字符串。
anything* : 用于替换占位符的值。

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

replace

用一个字符串替换一段文本。

参数:

string: 用于搜索、替换操作的字符串。
pattern: 用于搜索匹配的字符串或正则表达式。
replacement: 用于替换匹配项的字符串。
flags: (可选) 正则表达式参数。

返回值: 被替换之后的字符串。

示例:

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

列表函数

length

返回列表中元素的个数。

参数:

list - 由逗号或空格分隔的元素列表。 

返回值:一个代表元素个数的数字。

示例:

length(1px solid #0080ff);     =>3

extract

返回列表中指定位置的元素。

参数:

list - 逗号或空格分隔的元素列表。 
index - 指定列表中元素位置的数字。

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

示例:

extract(8px dotted red, 2);  => dotted

数学函数

ceil

向上取整

floor

向下取整

percentage

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

round

四舍五入取整。

sqrt

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

abs

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

sin

正弦函数。

asin

反正弦函数。返回以弧度为单位的角度,区间在 -PI/2 到 PI/2之间。

同类型的还有余弦、正切函数:cos/acos/tan/atan

pi

返回圆周率 π (pi);

pow

设第一个参数为A,第二个参数为B,返回A的B次方.

返回值与第一个参数有相同的单位,第二个参数的单位被忽略。

mod

返回第一个参数对第二参数取余的结果。

返回值与第一个参数单位相同,第二个参数单位被忽略。这个函数也可以处理负数和浮点数。

min

返回一系列值中最小的那个。

max

返回一系列值中最大的那个

类型函数

isnumber

如果一个值是一个数字(可以带单位),返回’真(true)’,否则返回’假(false)’.

isstring

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

iscolor

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

iskeyword

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

isurl

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

ispixel

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

isem

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

ispercentage

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

isunit

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

颜色定义函数

rgb(@red,@green,@blue)

通过十进制红色,绿色,蓝色三种值 (RGB) 创建不透明的颜色对象。

参数:

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

参数:

@alpha: 数字 0-1 或百分比 0-100%.

返回值:

颜色(color

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

当你想使用一种颜色来创建另一种颜色时很方便,如:@new: hsl(hue(@old), 45%, 90%);

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

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

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

hsv(@hue,@saturation,@value)

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

参数:

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

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

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

颜色通道函数

hue(@color)

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

参数:

@color - 颜色对象(a color object)

返回值:

整数 0-360

示例:

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

saturation(@color)

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

lightness(@color)

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

hsvhue(@color)

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

hsvsaturation(@color)

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

hsvvalue(@color)

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

red(@color)

提取颜色对象的红色值。

green(@color)

提取颜色对象的绿色值。

blue(@color)

提取颜色对象的蓝色值。

alpha(@color)

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

luma(@color)

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

示例:

luma(rgb(100, 200, 30))    =>44%

luminance(@color)

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

示例:

luminance(rgb(100, 200, 30))    =>65%

颜色操作函数

saturation(@color,@amount)

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

参数:

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

返回值:

颜色(color)

示例:

saturate(hsl(90, 80%, 50%), 20%)    =>#80ff00 // hsl(90, 100%, 50%)

desaturation(@color,@amount)

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

lighten(@color,@amount)

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

darken(@color,@amount)

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

fadein(@color,@amount)

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

fadeout(@color,@amount)

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

fade(@color,@amount)

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

spin(@color,@amount)

任意方向旋转颜色的色相角度 (hue angle)。

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

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

而应该用这种方法代替:

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

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

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

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

参数:

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

返回值:

颜色(color)

greyscale(@color)

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

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

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

这个函数对比 @background 的 luma 值与 @threshold 参数的大小,如果大于输出 @darkcolor, 小于则输出 @lightcolor,便于选择相对于背景更容易阅读的颜色,同时提高了使用颜色的灵活性

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

颜色混合函数

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

multiply(@color1,@color2)

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

screen(@color1,@color2)

与multiply() 函数效果相反,输出结果是更亮的颜色。(译注:对应Photoshop中的“变亮/滤色”。)

overlay(@color1,@color2)

结合 multiply() 与 screen() 两个函数的效果,令浅的颜色变得更浅,深的颜色变得更深。(译注:对应Photoshop中的“叠加”。)注意:输出结果由第一个颜色参数决定。

softlight(@color1,@color2)

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

hardlight(@color1,@color2)

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

difference(@color1,@color2)

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

exclusion(@color1,@color2)

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

average(@color1,@color2)

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

negation(@color1,@color2)

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

文章目录
  1. 1. 杂项函数
    1. 1.1. color
    2. 1.2. convert
    3. 1.3. data-uri
    4. 1.4. default
    5. 1.5. unit
  2. 2. 字符串函数
    1. 2.1. escape转义函数
    2. 2.2. e预判函数
    3. 2.3. %格式化
    4. 2.4. replace
  3. 3. 列表函数
    1. 3.1. length
    2. 3.2. extract
  4. 4. 数学函数
    1. 4.1. ceil
    2. 4.2. floor
    3. 4.3. percentage
    4. 4.4. round
    5. 4.5. sqrt
    6. 4.6. abs
    7. 4.7. sin
    8. 4.8. asin
    9. 4.9. pi
    10. 4.10. pow
    11. 4.11. mod
    12. 4.12. min
    13. 4.13. max
  5. 5. 类型函数
    1. 5.1. isnumber
    2. 5.2. isstring
    3. 5.3. iscolor
    4. 5.4. iskeyword
    5. 5.5. isurl
    6. 5.6. ispixel
    7. 5.7. isem
    8. 5.8. ispercentage
    9. 5.9. isunit
  6. 6. 颜色定义函数
    1. 6.1. rgb(@red,@green,@blue)
    2. 6.2. rgba(@red,@green,@blue,@alpha)
    3. 6.3. argb(@color)
    4. 6.4. hsl(@hue,@saturation,@lightness)
    5. 6.5. hsla(@hue,@saturation,@lightness,@alpha)
    6. 6.6. hsv(@hue,@saturation,@value)
    7. 6.7. hsva(@hue,@saturation,@value,@alpha)
  7. 7. 颜色通道函数
    1. 7.1. hue(@color)
    2. 7.2. saturation(@color)
    3. 7.3. lightness(@color)
    4. 7.4. hsvhue(@color)
    5. 7.5. hsvsaturation(@color)
    6. 7.6. hsvvalue(@color)
    7. 7.7. red(@color)
    8. 7.8. green(@color)
    9. 7.9. blue(@color)
    10. 7.10. alpha(@color)
    11. 7.11. luma(@color)
    12. 7.12. luminance(@color)
  8. 8. 颜色操作函数
    1. 8.1. saturation(@color,@amount)
    2. 8.2. desaturation(@color,@amount)
    3. 8.3. lighten(@color,@amount)
    4. 8.4. darken(@color,@amount)
    5. 8.5. fadein(@color,@amount)
    6. 8.6. fadeout(@color,@amount)
    7. 8.7. fade(@color,@amount)
    8. 8.8. spin(@color,@amount)
    9. 8.9. mix(@color1,@color2,[@weight:50%])
    10. 8.10. greyscale(@color)
    11. 8.11. contrast(@background,[@darkcolor:black],[@lightcolor:white],[@threshold:43%])
  9. 9. 颜色混合函数
    1. 9.1. multiply(@color1,@color2)
    2. 9.2. screen(@color1,@color2)
    3. 9.3. overlay(@color1,@color2)
    4. 9.4. softlight(@color1,@color2)
    5. 9.5. hardlight(@color1,@color2)
    6. 9.6. difference(@color1,@color2)
    7. 9.7. exclusion(@color1,@color2)
    8. 9.8. average(@color1,@color2)
    9. 9.9. negation(@color1,@color2)