Less 转义

最新推荐文章于 2024-09-10 09:05:35 发布

原创最新推荐文章于 2024-09-10 09:05:35 发布 · 719 阅读

本内容遵循CC 4.0 BY-SA版权协议

12 篇文章

订阅专栏

本文介绍了Less中的转义概念，当需要引入无效CSS语法或处理Less不识别的字符时，可通过转义字符实现。举例说明了在设置CSS属性如时，如何在Less中使用转义避免语法错误，以及转义后编译成CSS的效果。

本节我们学习 Less 语言中的转义（Escaping），什么是转义呢？

某些时候，当需要引入无效的 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。