css - 反应混合单位错误：无法在 css calc() 函数中一起计算 vw 和 px

Question

我想在 React 中使用 css calc() 使我的字体大小变得流畅，但是当我混合单位 vw 和 px 时它会不断抛出错误。

font-size: calc(14px + (26px - 14px)) * ((100vw - 300px) / (1600 - 300));

出现错误，SASS 无法编译 100vw - 300px。

解决此问题的最佳方法是什么？

标签： cssreactjssasstypography

Answer 1

在 CSScalc中，乘法或除法运算符必须有一个无单位数作为操作数之一。

MDN 文档说：

* 乘法。至少有一个参数必须是 a <number>。

/ 分配。右手边必须是<number>.

你的乘法违反了这条规则。简化是这样的：

calc(26px * (100vw - 300px) / 1300);

这是非法的，因为两者都不26px是(100vw - 300px)无单位的数字。

---

你还有一个额外的右括号14px)，因为你在你的问题中写了它，这使它成为语法错误。