杂项函数(1)

优质

小牛编辑

124浏览

2023-12-01

从本章开始，我们开始学习 Less 内置函数有关的知识，Less 中内置的函数可以帮助我们解决很多计算或者判断的问题。

对于函数的学习我建议可以现大致浏览一下有哪些函数以及他们对应的功能和用途。

等到我们用到的时候可以回过头来翻阅函数的参数以及详细的用法，具体使用的场景可以帮助我们快速理解函数的用途。

杂项函数简介

杂项函数主要用于处理图片路径、颜色等途径。

1.1 color 函数

函数用途：用于解析颜色，将颜色值的字符串处理为可以使用的颜色值。

参数： string 指定颜色值的字符串
返回值： color 颜色值
语法： color(param: string) => value

输入代码

.color {
  color: color("#fff");
}

输出代码

.color {
  color: #fff;
}

1.2 image-size 函数

函数用途：用于获取图片文件的尺寸。

参数： string 获取尺寸的文件
返回值：尺寸（图片长和宽）
语法： url(path:string) => value

输入代码

.img {
  background:url("file.png");
  background-repeat:no-repeat;
  background-size: image-size("file.png");
}

输出代码

.img {
  background:url("file.png");
  background-repeat:no-repeat;
  background-size: 10px 10px;
}

1.3 image-width 函数

函数用途：获取图片文件宽度。

参数： string 获取尺寸的宽度
返回值：宽度（单位为 px ）
语法： image-width(path: string) => value

输入代码

.img {
  width: image-width("file.png");
}

输出代码

.img {
  width: 10px;
}

1.4 image-height 函数

函数用途：获取图片文件长度。

参数： string 获取尺寸的长度
返回值：长度（单位为 px ）
语法： image-height(path: string) => value

输入代码

.img {
  height: image-height("file.png");
}

输出代码

.img {
  height: 10px;
}

1.5 convert 函数

函数用途：单位转换

第一个参数包含一个带单位的数字，第二个参数包含一个单位。

如果两个单位兼容，则进行单位转换。如果它们不兼容，则第一个参数将按原样返回。

支持转换的单位如下：

lengths(长度单位): m, cm, mm, in, pt , pc
time(时间单位): s , ms
angle(角度单位): rad , deg , grad , turn

参数：

number : 含有单位的浮点数。
identifier, string 或者 escaped value: 单位。

返回值： number

输入代码

.convert {
  time: convert(9s, "ms");
  lenght: convert(14cm, mm);
  unkow: convert(8, mm); // 无法转换返回原值
}

输出代码

.convert {
  time: 9000ms;
  lenght: 140mm;
  unkow: 8; // 无法转换返回原值
}

1.6 data-uri 函数

函数用途：将内联资源转换为 base64 或者 text/html 格式。

参数：

mimetype ： mime 类型字符串（可选）。
url ：内联文件的路径。

如果没有 mimetype ，data-uri 函数将从文件名后缀中猜测出来。文本和svg文件编码为 utf-8，其他所有文件编码为 base64。

如果提供了mimetype，且 mimetype 参数以 base64 结尾，则该函数将使用 base64 转换图片。例如，image / jpeg; base64被编码为 base64 ，而 text / html 被编码为 utf-8 。

如果ieCompat选项打开，资源过大，或者在浏览器中使用该功该函数则会回退为url()。

输入代码

.img {
  // 1
  background: data-uri('../data/image.jpg');
  // 2
  background: data-uri('image/jpeg;base64', '../data/image.jpg');
  // 3
  background: data-uri('image/svg+xml;charset=UTF-8', 'image.svg');
}

输出代码

.img {
  // 1
  background: url('data:image/jpeg;base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg==');
  // 2
  background: url('data:image/jpeg;base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg==');
  // 3
  background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%3E%3Ccircle%20r%3D%229%22%2F%3E%3C%2Fsvg%3E");
}