关于前端:Less-转义符

什么是本义？

某些时候，当须要引入有效的 CSS 语法或 Less 不能辨认的字符，就须要应用转义字符。Less 中的转义字符就是在字符串后面加上一个 ~ 符号，并将须要本义的字符串放在 "" 或 '' 中，例如 ~"xkd"。本义容许你应用任意字符串作为属性或变量值。

本义的应用

个别状况下咱们是不须要用到本义的，只有在代码不能被失常编译的状况下，才须要应用本义。上面咱们来举一个例子阐明一下。

示例：

例如 border-radius 属性，在 CSS 中咱们能够应用斜杆 / 来设置属性值，/ 后面的是程度半径，前面的是垂直半径。然而在 Less 中，则不反对应用 /，如下所示：

.box{
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  border-radius: 0px 25px 25px 0 / 0 25px 25px 0px;
}

执行 lessc index.less index.css 命令编译代码：

能够看到上图中报了一个语法错误，这种状况下，咱们就能够应用本义符将斜杆 / 进行本义，如下所示：

.box{
  width: 100px;
  height: 100px;
  border: 1px solid #000; 
  border-radius: 0px 25px 25px 0 ~"/" 0 25px 25px 0px;
}

本义后，再次执行命令，能够看到胜利编译后的 CSS 代码如下所示：

.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  border-radius: 0px 25px 25px 0 / 0 25px 25px 0px;
}

总结

本义在 Less 中用的并不是很多，只有当代码不能被辨认时，才须要应用本义，任何 ~"text" 被编译成 CSS 代码后，都将显示为 text。