less中使用calc并兼容

使用环境

移动端三栏布局中主体（黄色）部分固定自适应手机大小，使用less编写css样式，由于calc的移动端适应性比较差，需处理兼容。

代码

公共less样式文件

// 计算
.heightcalc(@val) {
  /*Firefox*/
	height: -moz-calc(~'@{val}');
	/*chrome safari*/
	height: -webkit-calc(~"@{val}");
	/*Standard */
	height: calc(~"@{val}");
}

具体使用文件

<style lang="less" scoped>
@import url("~@assets/common.less");
.index {
  .main {
    width: 100vw;
    .heightcalc("100vh - 2.5rem - 3.3rem");
    background: yellow;
    position: fixed;
    top: 2.5rem;
    left: 0;
  }
}
</style>