calc()函数中乘法运算符*失效问题求助

几个必查修复点 #

• 检查--cell-size变量定义
  必须保证--cell-size已正确声明且带有合法CSS单位（比如px、rem）。如果变量是纯数字（无单位），calc里的乘法会直接失效——CSS规定乘法运算中至少一个操作数无单位，但这里你是带单位的变量乘0.9（无单位），所以变量必须带单位才能正常运算。
  错误写法：

  :root { --cell-size: 50; } /* 无单位，运算无效 */
  

  正确写法：

  :root { --cell-size: 50px; } /* 带单位，运算正常 */
  

• 确认星号*前后的空格
  CSS的calc()对运算符格式要求严格，*前后必须有空格。哪怕写成var(--cell-size)*0.9（无空格），浏览器都会解析失败，务必写成var(--cell-size) * 0.9。

• 排查变量作用域与继承
  如果使用--mark-size的元素没继承到--cell-size，var(--cell-size)会被解析为0，乘完还是0，自然看不到效果。可以把--cell-size定义在全局（比如:root内），或者确保使用变量的元素能正确获取到该变量。

• 检查拼写与浏览器兼容
  先排查有没有拼写错误，比如把calc写成cal，或者变量名写错。另外IE11不支持CSS自定义属性，若使用旧浏览器，换Chrome、Firefox等现代浏览器测试。

快速调试技巧 #

直接把变量替换成具体数值测试，比如改成--mark-size: calc(50px * 0.9);，如果生效了，说明问题出在--cell-size变量上；若还是无效，检查浏览器控制台是否有CSS语法报错。

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