less学习之Less内置常用函数

一、杂项函数

1、color

解析颜色，将代表颜色的字符串转换为颜色值.

参数

  • string： 代表颜色值的字符串。

返回值： color
案例： color("#aaa");
输出： #aaa

2、convert

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

兼容的单位：

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

案例：

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

输出：

9000ms
140mm
8

3、data-uri

将资源内联进样式表，如果开启了 ieCompat 选项并且资源太大，或者此函数的运行环境为浏览器，则会回退到直接使用 url() 。如果没有指定 MIME，则 node 将使用 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==');

4、unit

删除或更换单位。

参数

  • dimension: 带单位或不带单位的数字。
  • unit: (可选) 目标单位，如果省略此参数，则删除单位。

案例： unit(5, px)
输出： 5px

案例： unit(5em)
输出： 5

二、字符串函数

1、escape

对字符串中的特殊字符做 URL-encoding 编码
这些字符不会被编码：,, /, ?, @, &, +, ', ~, ! and $。
被编码的字符是：\<space\>, #, ^, (, ), {, }, |, :, >, <, ;, ], [ and =。

参数：string: 需要转义的字符串。
返回值：转义后不带引号的 string 字符串。
案例：escape('a=1')
输出： a%3D1

2、% 格式化

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

第一个参数是一个包含占位符的字符串。占位符以百分号 % 开头，后面跟着字母 s、S、d、D、a 或 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";

3、replace

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

参数

  • 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;

三、列表函数

1、length

返回列表中元素的个数。

参数

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

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

案例： length(1px solid #0080ff);
输出：3

案例：

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

输出：n: 4;

2、extract

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

参数

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

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

案例： extract(8px dotted red, 2);
输出： dotted

案例：

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

输出：value: coconut;

四、数学函数

1、ceil

向上取整。

参数： number - 浮点数。
返回值： 整数（integer）
案例： ceil(2.4)
输出： 3

2、floor

向下取整。

参数： number - 浮点数。
返回值： 整数（integer）
案例： ceil(2.4)
输出： 2

3、percentage

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

参数： number - 浮点数。
返回值： 字符串（string）
案例： percentage(0.5)
输出： 50%

4、round

四舍五入取整。

参数：

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

返回值： 数字（number）

案例： round(1.67)
输出： 2

案例： round(1.67, 1)
输出： 1.7

5、sqrt

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

参数： number - 浮点数。
返回值： 数字（number）
案例： sqrt(25cm)
输出： 5cm

6、abs

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

7、pow

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

参数：

  • number1: base -浮点数。
  • number2: exponent - 浮点数。

返回值： 数字（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%

8、mod

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

参数：

  • number1: 浮点数。
  • number2: 浮点数。

返回值： 数字（number）

案例：

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

输出：

NaNcm;
5cm
-1%;

9、min/max

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

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

返回值： 最小值/最大值

10、三角函数（sin、asin、cos、acos、tan、atan、pi）

五、类型函数

1、isnumber / isstring / iscolor / iskeyword / isurl / ispixel / ispercentage / isem 、isunit

如果待验证的值为数字 / 字符串 / 颜色 / 关键字 / url / 以px为单位的数值 / 百分数 / 以em为单位的数值 / 指定单位的数值则返回 true ，否则返回 false 。

参数：value - 待验证的值或变量。

返回值： 如果待验证的值为数字 / 字符串 / 颜色 / 关键字 / url / 以px为单位的数值 / 百分数 / 以em为单位的数值 / 指定单位的数值则返回 true ，否则返回 false 。

案例：

iscolor(#ff0);     // true
iscolor(blue);     // true
isstring("string"); // true
isnumber(1234);     // true
isnumber(56px);     // true
isnumber(7.8%);     // true
iskeyword(keyword);  // true
isurl(url(...)); // true
ispixel(56px);     // true
ispercentage(7.8%);     // true
isem(7.8em);     // true
isunit(8em, em);     // true

六、颜色定义函数

  • r: 红色，0-255 的整数或 0-100% 的百分比数。
  • g: 绿色，0-255 的整数或 0-100% 的百分比数。
  • b: 蓝色，0-255 的整数或 0-100% 的百分比数。
  • a: 透明度，0-1 的整数或 0-100% 的百分比数。
  • hue: 色相，0-360 的整数，用于表示度数。
  • saturation: 饱和度，0-100% 的百分比数或 0-1 的整数。
  • lightness:亮度， 0-100% 的百分比数或 0-1 的整数。
  • value: 色调 ，0-100% 的百分比数或 0-1 的整数。
  • amount: 百分比 0-100%
  • angle: 任意数字表示角度 （+ 或 – 表示方向）

1、rgb(@r, @g, @b);

案例：rgb(247, 75, 33)
返回值：#f74b21

2、rgba(@r, @g, @b, @a);

案例：rgb(247, 75, 33, 0.5)
返回值：rgba(247, 75, 33, 0.5)

3、argb(@color);

创建格式为 #AARRGGBB 的十六进制颜色值

案例：argb(rgba(247, 75, 33, 0.5))
返回值：#80f74b21

4、hsl(@hue, @saturation, @lightness);

案例：hsl(90, 100%, 50%)
返回值：#80ff00

5、hsla(@hue, @saturation, @lightness, @alpha);

案例：hsl(90, 100%, 50%, 0.5)
返回值：rgba(128, 255, 0, 0.5)

6、hsv(@hue, @saturation, @value);

案例：hsv(90, 100%, 50%)
返回值：#408000

7、hsva(@hue, @saturation, @value, @alpha);

案例：hsva(90, 100%, 50%, 0.5)
返回值：rgba(64, 128, 0, 0.5)

8、hue(@color);

案例：hue(hsl(90, 100%, 50%))
返回值：90

9、saturation(@color);

案例：saturation(hsl(90, 100%, 50%))
返回值：100%

10、lightness(@color);

案例：lightness(hsl(90, 100%, 50%))
返回值：50%

hsvhue(@color); // * 从颜色中提取 hue 值，以HSV色彩空间表示（色相）
hsvsaturation(@color); // * 从颜色中提取 saturation 值，以HSV色彩空间表示（饱和度）
hsvvalue(@color); // * 从颜色中提取 value 值，以HSV色彩空间表示（色调）
red(@color); // 从颜色值中提取 'red' 值（红色）
green(@color); // 从颜色值中提取 'green' 值（绿色）
blue(@color); // 从颜色值中提取 'blue' 值（蓝色）
alpha(@color); // 从颜色值中提取 'alpha' 值（透明度）

11、luma(@color);

计算颜色对象的 luma 值（亮度的百分比表示法）。使用在WCAG2.0中定义的SMPTE C / Rec. 709 coefficients。 这个计算公式也用在 contrast() 函数中。

案例：luma(rgb(100, 200, 30))
返回值：65%

12、saturate(@color, @amount);

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

案例：saturate(hsl(90, 90%, 50%), 10%)
返回值：#80ff00// hsl(90, 100%, 50%)

13、desaturate(@color, @amount);

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

案例：desaturate(hsl(90, 90%, 50%), 10%)
返回值：#80e51a// hsl(90, 80%, 50%)

14、lighten(@color, @amount);

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

案例：lighten(hsl(90, 90%, 50%), 10%)
返回值：#99f53d// hsl(90, 90%, 60%)

15、darken(@color, @amount);

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

案例：darken(hsl(90, 90%, 50%), 10%)
返回值：#66c20a// hsl(90, 90%, 40%)

16、fadein(@color, @amount);

降低颜色的透明度（或增加不透明度），令其更不透明，对不透明的颜色无效。

案例：fadein(hsla(90, 90%, 50%, 0.5), 10%)
返回值：rgba(128, 242, 13, 0.6)// hsla(90, 90%, 50%, 0.6)

17、fadeout(@color, @amount);

增加颜色的透明度（或降低不透明度），令其更透明，对不透明的颜色无效。

案例：fadeout(hsla(90, 90%, 50%, 0.5), 10%)
返回值：rgba(128, 242, 13, 0.4)// hsla(90, 90%, 50%, 0.6)

18、fade(@color, @amount);

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

案例：fade(hsl(90, 90%, 50%), 10%)
返回值：rgba(128, 242, 13, 0.1)//hsla(90, 90%, 50%, 0.1)

19、spin(@color, @angle);

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

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

而应该用这种方法代替：

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

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

案例：

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

返回值：

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

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

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

@weight: 可选项：平衡两种颜色的百分比, 默认 50%。

案例：

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)

21、greyscale(@color);

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

案例：greyscale(hsl(90, 90%, 50%))

返回值：#808080// hsl(90, 0%, 50%)

22、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% 的灰色背景应该显示白色还是黑色的文字。一般来说，如果本色方案偏浅，则应该设低一点，否则设高一点。

案例：

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

23、multiply(@color1, @color2);

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

24、screen(@color1, @color2);

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

25、overlay(@color1, @color2);

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

26、softlight(@color1, @color2);

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

27、hardlight(@color1, @color2);

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

28、difference(@color1, @color2);

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

29、exclusion(@color1, @color2);

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

30、average(@color1, @color2);

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

31、negation(@color1, @color2);

与 difference() 函数效果相反，输出结果是更亮的颜色。

posted on 2024-01-24 00:31  梁飞宇  阅读(1449)  评论(0)    收藏  举报