Sass中calc()计算宽度不生效如何修复

核心原因 #

你写的width: calc((100% - 237px) * 25%)样式不生效，本质是Sass的编译逻辑和原生CSS calc()解析规则冲突：Sass默认会在编译阶段处理代码中的所有算术运算，当calc()内同时存在%这类需要页面加载运行时才能确定具体值的相对单位，以及px这类固定绝对单位时，Sass没法在编译阶段算出确定结果，就会输出无效的属性值，浏览器识别不了对应的width规则，自然不会生效。

修复方案 #

• 方案1：用Sass插值语法#{}包裹calc内部的完整计算逻辑，明确告诉Sass这部分内容不需要提前编译，直接原样输出给浏览器，由浏览器在运行时完成计算。修正后的代码：

width: calc( #{(100% - 237px) * 25%} );

• 方案2：调整写法适配Sass的解析规则，保证calc内部所有运算符两侧都保留空格，也可以把嵌套的百分比乘法转成小数降低解析冲突概率，写法参考：

width: calc( (100% - 237px) * 0.25 );

校验方法 #

编译后打开浏览器开发者工具，选中目标元素查看样式面板，如果width属性展示为完整的合法calc表达式，就说明修复成功。

内容的提问来源于stack exchange，提问作者Truong dinh hung