作为一个前端开发者，现在less或者scss已是不可或缺的技能。会了这个技能能节省出许多写css的时间。

普通计算

最近在写自己的网站的时候，由于对less的认识不深入，写了以下代码：

1
@endwidth:calc(50% - 50px);

结果，less编译的时候把这玩意当成运算式给直接计算了，成了

1
@endwidth:calc(0%);

于是，去查了一下less的用法才发现，原来是less的运算和calc的用法有重叠。所以应该把less编译这一次的计算给去掉。
正确写法应该是：

1
@endwidth:calc(~"50% - 50px");

也就是在calc里面加上 ~ 。

有变量参与计算

以上是可以了，担是当把 50px 换成另一个变量时，又编译出错了。也就是这样：

1
left: calc(~"50% + @endwidth" );

由于 ~ 能把less编译的这一次计算给去掉，而 @endwith 的值，需要计算两次，所以在去掉的时候，对@endwidth的计算不能去掉。
所以应该把 @endwidth 放在 ~ 的范围外面。

1
left: calc(~"50% +" @endwidth);

多变量连续计算

有了上面的解析，多变量计算就明白了，如下：

1
2
3
4
5
6
7
8
@gap:10px;
.init(@i)
{
    left:calc(~"50% -"  @gap * @i ~"-" (@i * 2) * 50px) ;
}
.box{
	.init(2);
}

也就是，对需要去掉一次计算的(包括计算符)，需要放在 ~ 中，而需要在less编译的时候就计算一次的变量(或者常值)，直接放在 ~ 的范围外面。
编译结果，在css文件中可以看到：

1
2
3
.box{
	left:calc( 50% - 200px )
}

总结

calc是css3中一个非常有用的东东，但与less配合使用的时候，需要注意less编译时候的计算问题，根据需要是否需要去掉。其作法就是在不需要less编译的部分使用 ~ 包裹起来，而需要计算的则放在 ~ 的外在，特别需要注意的是运算符是否也需要包含。

赏

本文地址： http://wsdever.github.io/2015/05/01/20150321/