css属性设置calc后(动态计算)，不生效的问题

1. 格式问题

在书写calc语法时，运算符(只有 + 和 - 需要加空格，因为运算允许负数的出现)的左右两边需要空格，，没有空格不生效。为了统一，/ 和 * 最好都带上空格。

//不会生效
height:cacl(100hv-30px);
// 正确格式，可以生效  
height:cacl(100hv - 30px);  

2. 在继承时

父元素需设置宽高，若没有可设置100%

// 父元素需要有确定的高度
height：500px
// 子元素继承高度
.child{
	// 正确形式：cacl继承父元素的高度500px
	height:cacl(100% - 80px);
}

3. 在less或sass中

• 定义的变量需要用括号包裹

// 定义变量
$a: 20px;  
// 错误写法：不会生效
height: calc(100vh - $a);   
// 正确写法：#($a)，使用时需要加括号
height: calc(100vh - #($a)); 

• less中calc函数正常写法不生效

// 错误写法：不生效
height: calc(100% - 50px);
// 需要改为：正确写法：可以生效
height: calc(~"100% - 50px");