Less函数说明

Posted 2020-08-21 meixiaomin

索引

• escape(@string); // 通过 URL-encoding 编码字符串
• e(@string); // 对字符串转义
• %(@string, values...); // 格式化字符串
• unit(@dimension, [@unit: ""]); // 移除或替换属性值的单位
• color(@string); // 将字符串解析为颜色值
• data-uri([mimetype,] url); // * 将资源内嵌到css中，可能回退到url()
• ceil(@number); // 向上取整
• floor(@number); // 向下取整
• percentage(@number); // 将数字转换为百分比，例如 0.5 -> 50%
• round(number, [places: 0]); // 四舍五入取整
• sqrt(number); // * 计算数字的平方根
• abs(number); // * 数字的绝对值
• sin(number); // * sin函数
• asin(number); // * arcsin函数
• cos(number); // * cos函数
• acos(number); // * arccos函数
• tan(number); // * tan函数
• atan(number); // * arctan函数
• pi(); // * 返回PI
• pow(@base, @exponent); // * 返回@base的@exponent次方
• mod(number, number); // * 第一个参数对第二个参数取余
• convert(number, units); // * 在数字之间转换
• unit(number, units); // * 不转换的情况下替换数字的单位
• color(string); // 将字符串或者转义后的值转换成颜色
• 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\' 值（亮度）
• hsvhue(@color); // * 从颜色中提取 hue 值，以HSV色彩空间表示（色相）
• hsvsaturation(@color); // * 从颜色中提取 saturation 值，以HSV色彩空间表示（饱和度）
• hsvvalue(@color); // * 从颜色中提取 value 值，以HSV色彩空间表示（色调）
• 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);
• iscolor(@colorOrAnything); // 判断一个值是否是颜色
• isnumber(@numberOrAnything); // 判断一个值是否是数字（可含单位）
• isstring(@stringOrAnything); // 判断一个值是否是字符串
• iskeyword(@keywordOrAnything); // 判断一个值是否是关键字
• isurl(@urlOrAnything); // 判断一个值是否是url
• ispixel(@pixelOrAnything); // 判断一个值是否是以px为单位的数值
• ispercentage(@percentageOrAnything); // 判断一个值是否是百分数
• isem(@emOrAnything); // 判断一个值是否是以em为单位的数值
• isunit(@numberOrAnything, "rem"); // * 判断一个值是否是指定单位的数值

含*号的函数只在1.4.0 beta以上版本中可用

函数解析

字符串函数 (String functions)

escape(@string)

使用URL-encoding的方式编码字符串。

以下字符不会被编码：, / / / ? / @ / & / + / \' / ~ / ! / $。

最常见的被编码的字符串包括： / # / ^ / ( / ) / { / } / | / : / > / < / ; / ] / [ / =。

参数:

• 字符串：需要转义的字符串

返回值：字符串 (string)

例如：

escape(\'a=1\')

输出：

a%3D1

注意：如果参数不是字符串的话，函数行为是不可预知的。目前传入颜色值的话会返回undefined，其它的值会原样返回。写代码时不应该依赖这个特性，而且这个特性在未来有可能改变。

e

用于对CSS的转义，与~"value"类似。它接受一个字符串作为参数，并原样返回内容（不含引号）。它可用于输出一些不合法的CSS语法，或者是使用LESS不能识别的属性。

参数：

• 字符串：需要转义的字符串

返回值：字符串的内容，不含引号

例如：

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

综合类函数 (Misc functions)

color(@string)

解析颜色，将代表颜色的字符串转换为颜色值，参数必须是16进制表示的颜色或者缩写写法。

参数:

• @字符串：代表颜色值的字符串

例如：

color("#445566")
color(~"#123")

输出：

#445566
#112233

unit

移除或替换属性值 (dimension) 的单位。

参数:

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

例如：

unit(5, px)

输出：

5px

例如：

unit(5em)

输出：

5

data-uri

将一个资源使用BASE64编码嵌入到样式文件，如果开启了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==\');

算数函数 (Math functions)

ceil

向上取整。

参数：

• 数字：浮点数

返回值：向上取整后的整数

例如：

ceil(2.4)

输出：

3

floor

向下取整。

参数：

• 数字：浮点数
• 返回值：向下取整后的整数

例如：

floor(2.6)

输出：

2

percentage

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

参数:

• 数字：浮点数

返回值：字符串

例如：

percentage(0.5)

输出：

50%

round(number, [places: 0])

四舍五入取整。

参数:

• 数字：浮点数
• 小数位数：数字，可选，四舍五入取整的小数点位置，默认值为0。

返回值：数字 (number)

例如：

round(1.67)

输出：

2

例如：

round(1.67, 1)

输出：

1.7

sqrt

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

参数：

• 数字：浮点数

返回值：数字，平方根

例如：

sqrt(25cm)

输出：

5cm

例如：

sqrt(18.6%)

输出：

4.312771730569565%;

abs

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

参数：

• 数字：浮点数

返回值：数字，绝对值

例如：

abs(25cm)

输出：

25cm

例如：

abs(-18.6%)

输出：

18.6%

sin

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

参数：

• 数字：浮点数，角度
• 返回值：数字，角度对应的正弦值

例如：

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。

asin

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

参数：

• 数字：浮点数，代表正弦值，范围为 [-1,1]
• 返回值：数字，角度

例如：

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

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

参数：

• 数字：浮点数，角度
• 返回值：数字，角度对应的余弦值

例如：

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

分别输出：

0.5403023058681398
0.9998476951563913
0.9998766324816606

acos

反余弦函数，返回以弧度为单位的角度，区间在 0 到 PI之间。

参数：

• 数字：浮点数，代表余弦值，范围为 [-1,1]
• 返回值：数字，角度

例如：

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

分别输出：

1rad
0rad
NaNrad

tan

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

参数：

• 数字：浮点数，角度
• 返回值：数字，角度对应的正切值

例如：

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

分别输出：

1.5574077246549023
0.017455064928217585
0.015709255323664916

atan

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

参数：

• 数字：浮点数，代表正切值
• 返回值：数字，角度

例如：

atan(-1.5574077246549023)
atan(0)
round(atan(22), 6) // 四舍五入输出6位小数

分别输出：

-1rad
0rad
1.525373rad;

pi

返回圆周率PI。

参数：无

返回值：数字，圆周率

例如：

pi()

输出：

3.141592653589793

pow

假设第一个参数为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
Less函数

 Shader HLSL片段说明
 以下代码片段 C++ 的说明
 less基础入门
 markdown 打字稿...编码说明，提示，作弊，指南，代码片段和教程文章
 Less运算和函数