本节我们学习 Less 语言中的转义(Escaping),什么是转义呢?
某些时候,当需要引入无效的 CSS 语法或 Less 不能识别的字符,就需要使用转义字符。Less 中的转义字符就是在字符串前面加上一个 ~ 符号,并将需要转义的字符串放在 “” 或 '' 中html转义符,例如 ~”xkd”。转义允许你使用任意字符串作为属性或变量值。
转义的使用
一般情况下我们是不需要用到转义的,只有在代码不能被正常编译的情况下,才需要使用转义。下面我们来举一个例子说明一下。
示例:
例如 border-radius 属性,在 CSS 中我们可以使用斜杆 / 来设置属性值,/ 前面的是水平半径,后面的是垂直半径。但是在 Less 中,则不支持使用 /html转义符,如下所示:
.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。
———END———
限 时 特 惠:本站每日持续更新海量各大内部创业教程,一年会员只需128元,全站资源免费下载点击查看详情
站 长 微 信:jiumai99
声明:本站内容转载于网络,版权归原作者所有,仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。本站仅保存近一年的最新资源,过期资源将不在保留。若本站内容侵犯了原著者的合法权益,可联系我们进行处理。本站仅作项目分享,不提供任何收益保障,风险自辩,不对操作项目的收益及损失负责.站长不是项目作者,不负责项目解答