绝对定位元素能否使用calc()函数？火狐下使用报属性值无效如何解决

绝对定位元素是否支持calc() #

绝对定位元素的定位属性（top/left/right/bottom）完全支持calc()函数赋值，这是CSS规范明确覆盖的用法，火狐浏览器全主流版本均支持标准calc()语法。

报错原因及修复方案 #

报错根因 #

• Sass变量未做插值处理：你代码中的progressBarHeight是Sass变量，Sass默认不会解析calc()内部的变量，编译后会直接把progressBarHeight作为字符串输出到CSS文件中，浏览器无法识别该标识符，因此判定属性值无效。
• 前缀属性顺序错误：-webkit-calc是webkit内核浏览器的前缀兼容写法，必须放在标准calc属性之前。你将前缀写法放在标准写法之后，会直接覆盖标准写法，而火狐浏览器不识别-webkit-calc语法，最终触发属性值无效警告。

修复后代码 #

.absolute {
  width: 90%;
  height: 90%;
  display: flex;
  position: absolute;
  left: 50%;
  top: -webkit-calc(50% + #{$progressBarHeight});
  top: calc(50% + #{$progressBarHeight});
  transform: translate(-50%, -50%);
}

注：Sass变量需要用#{}插值语法包裹，才能在calc()内部被正确编译替换为对应的实际值。

内容的提问来源于stack exchange，提问作者software