Less高度计算calc方法总结，Less注释

最近一直在用less，基本上还挺好用的。但使用CSS3的calc函数时却发现个冲突问题。

问题描述

.class {
  height: calc(~"100% - 50px");
}

谁知道less自己就把它当表达式计算掉了，导致到浏览器那变成了calc(50%) o(╯□╰)o

解决方法

解决方法也挺简单，加上~用"”包起来，-号左右两边空格必须。

.class {
  height: calc(~"100% - 50px");
}

可如果要用变量怎么用呢？也不复杂，像下面这样就搞定啦。

.class {
  @cap: 50px;
  height: calc(~"100% - @{cap}");
}

Less中的注释

1、使用css中的注释：/**/

2、使用 // 注释 （// 编译的时候会自动过滤掉）

​两者的区别：

• /**/中的注释在编译的是会被编译出来的，会在编译生成的CSS中会出现
• // 是不会被编译的，编译时自动过滤，在编译生成的CSS中没有