Less从入门到精通——函数库—字符串函数 & 列表（长度）函数（附源码、学习视频和笔记）
完整学习资源在这里哦~
链接：https://pan.baidu.com/s/1XHxElnc2N-qwg2f2J30Qyw
提取码：4k8t
字符串函数
| 字符串函数 | 说明 |
|---|---|
| escape() | 将输入字符串中的 url 特殊字符进行编码处理 |
| e() | CSS转义，也可以用 ~ “ 值 ”符号代替 |
| %() | 格式化一个字符串 |
| replace() | 用另一个字符串替换文本 |
escape()
将URL 编码应用于输入字符串中的特殊字符。
不转义的编码： , / ? @ & + ' ~ ! $转义的编码： # ^ ( ) { } | : < > ; ] [ =
- 参数：
string要转义的字符串 - 返回：
string不带引号的转义内容
注意：如果参数不是字符串，则未定义输出。
div{
escape('a=1');
}
// 输出
div {
a%3D1;
}
e()
对字符串进行转义，也叫做避免编译，使用后将字符串原样输出而不进行编译
它期望字符串作为参数，并返回其内容，但无引号。它可用于输出 CSS 值（该值不是有效的 CSS 语法），或使用 Less 无法识别的专有语法。这样 Less 就不能进行编译，输出到 css 中让浏览器去编译。
- 参数：
string要转义的字符串 - 返回：
string转义字符串，不带引号。
div{
e('6px');
~"5px";
calc(960px - 100px);
calc(~'950px - 100px');
}
// 输出
div {
6px;
5px;
860px; // 在 Less 编译时进行了运算(webstorm 会出现的问题，VScode新版不会)
calc(950px - 100px);
}
%()
函数为字符串设置格式，对字符串进行了格式化。
- 参数：
string：使用占位符设置字符串的格式；anything* ： 值，以替换占位符。 - 返回：
string，格式化后的字符串。 - 格式为：
%(string, arguments ...)
第一个参数是带占位符的字符串。所有占位符以%（百分比符号）开头，后跟字母s，S，d，D，a 或 A 。其余参数包含替换占位符的表达式。如果需要打印百分比符号，请用 另一个百分比转义（%%）。
如果需要将特殊字符转义到其 utf-8 转义代码中，请使用大写占位符。函数转义除() ' ~ ! 以外的所有特殊字符。空格编码为%20 。小写占位符保留特殊字符。
占 位 符：
d , D , a , A ： 可以替换为任何类型的参数（颜色、数字、转义值、表达式等）。如果将它们与字符串结合使用，将使用整个字符串， 包括其引号。并且，引号会被替换到字符串中参数的原有位置，它们不会通过 " / " 或任何类似项转义。
s，S ：可由任何表达式替换。如果将字符串与字符串一起使用，只会使用替换成字符串参数的值 ，并省略引号。
div{
font-family: %("%a %a","Yahei","Microsoft");
font-family: %("%A %A","Yahei","Microsoft");
font-family: %("%d %d","Microsoft","Yahei");
font-family: %("%D %D","Microsoft","Yahei");
font-family: %("%s %s","Microsoft","Yahei");
font-family: %("%S %S","Yahei","Microsoft");
}
div {
font-family: ""Yahei" "Microsoft""; // a小写不会转义 引号会被替换到参数中原有位置
font-family: "%22Yahei%22 %22Microsoft%22"; // A大写会转义引号
font-family: ""Microsoft" "Yahei""; // d小写不会转义 引号会被替换到参数中原有位置
font-family: "%22Microsoft%22 %22Yahei%22"; // D大写会转义引号
font-family: "Microsoft Yahei"; // s 省略引号
font-family: "Yahei Microsoft"; // S 省略引号
}
replace()
用另一个字符串替换文本
参数：
-
string: 要搜索和替换的字符串。 -
pattern: 要搜索的字符串或正则表达式模式。 -
replacement: 要替换匹配模式的字符串。 -
flags:（可选）正则表达式标志。
div{
&::before{
content: replace('a,b',a,b);
}
}
// 输出
div::before {
content: 'b,b';
}
列表函数(长度函数)
| 列表函数 | 说明 |
|---|---|
| length() | 返回值列表中的元素数。 |
| extract() | 返回列表中指定位置的值。 |
length()
返回值列表中的元素数。
- 参数：逗号或空格分隔值列表
- 返回：列表中元素的整数
div{
@list:"banner","apple","grape";
length(@list) * 5px; // 3 * 5
}
// 输出
div {
15px;
}
extract()
返回列表中指定位置的值。
div{
@list:"banner","apple","grape";
&::before{
content: extract(@list,2);
}
}
// 输出
div::before {
content: "apple";
}