解决Less下使用CSS calc函数px按%计算导致结果错误的问题

在Less中使用CSS函数calc()动态计算长度值时出现错误,原本是px像素单位的数值被当成%百分比单位来计算,导致计算结果不正确。

Less代码:

.calc {
	width:calc(100% - 90px);
}

编译后的CSS代码:

.calc {
	width:calc(10%);
}

原因是less对代码进行了转换编译,解决方法是使用 “~''” 符合禁止对其编译,让其原样输出即可。

修改代码如下:

.calc {
	width:~'calc(100% - 90px)';
}

编译后的代码如下:

.calc {
	width:calc(100% - 90px);
}

PS:单双引号都可以。

关键词: css3 less