完整学习资源在这里哦~

链接：​​https://pan.baidu.com/s/1XHxElnc2N-qwg2f2J30Qyw​​​

提取码：4k8t

字符串函数

字符串函数

说明

escape()

将输入字符串中的 url 特殊字符进行编码处理

e()

CSS转义，也可以用 ~ “ 值 ”符号代替

%()

格式化一个字符串

replace()

用另一个字符串替换文本

escape()

将URL 编码应用于输入字符串中的特殊字符。

​​不转义的编码：​​ , / ? @ & + ' ~ ! $

​​转义的编码：​​ # ^ ( ) { } | : < > ; ] [ =

  • 参数：​​string​​要转义的字符串
  • 返回：​​string​​​不带引号的转义内容
    注意：如果参数不是字符串，则未定义输出。

div{
    width: escape('a=1');
}
// 输出
div {
  width: a%3D1;
}

e()

对字符串进行转义，也叫做避免编译，使用后将字符串原样输出而不进行编译

它期望字符串作为参数，并返回其内容，但无引号。它可用于输出 CSS 值（该值不是有效的 CSS 语法），或使用 Less 无法识别的专有语法。这样 Less 就不能进行编译，输出到 css 中让浏览器去编译。

  • 参数：​​string​​要转义的字符串
  • 返回：​​string​​转义字符串，不带引号。
div{
    width: e('6px');
    width: ~"5px";
    width: calc(960px - 100px);
    width: calc(~'950px - 100px');
}
// 输出
div {
  width: 6px;
  width: 5px;
  width: 860px;     // 在 Less 编译时进行了运算(webstorm 会出现的问题，VScode新版不会)
  width: 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";
   width: length(@list) * 5px;    // 3 * 5
}
// 输出
div {
  width: 15px;
}

extract()

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

div{
   @list:"banner","apple","grape";
   &::before{
       content: extract(@list,2);
   }
}
// 输出
div::before {
  content: "apple";
}

原文链接为：​​https://www.cnblogs.com/Monster-su/p/14115419.html​​