SCSS calc表达式报错含-1，仅GitHub构建时出现

问题详情 #

在基于Jekyll主题的SCSS文件中定义su-span函数时，本地构建站点完全正常，但GitHub Pages生成站点时抛出如下错误：

Undefined operation "-1 * calc((3 / 14.75) * 100%)"

无法定位错误中-1的来源，已尝试以下写法均未解决：

• 原写法：@return calc((#{$span-width} / #{$container}) * 100%);
• 替代写法：@return percentage(math.div($span-width, $container));

附上完整su-span函数代码：

@function su-span($span-width, $container: 14.75) {
  // 函数内部其他逻辑（如果有）
  @return calc((#{$span-width} / #{$container}) * 100%);
}

可能原因&解决方案 #

1. 检查函数调用场景 #

错误中的-1大概率来自调用su-span的代码，比如存在类似width: -1 * su-span(3);的写法。旧版本Sass（如GitHub Pages默认使用的LibSass）无法正确解析-1 * calc(...)这种嵌套运算结构。

• 排查所有调用su-span的位置，确认是否有对返回值进行负向运算的代码，若有则调整为直接在函数参数中传入负数（如su-span(-3)），或拆分运算逻辑。

2. 适配GitHub Pages的Sass版本差异 #

本地通常使用最新版Dart Sass，但GitHub Pages默认使用旧版LibSass，二者对语法的支持存在差异：

• 若使用math.div，需确保在文件顶部引入sass:math模块：

  @use "sass:math";
  

• 避免在calc内部嵌套Sass运算，提前用Sass计算百分比后再传入calc：

  @function su-span($span-width, $container: 14.75) {
    $percent: math.div($span-width, $container) * 100%;
    @return calc(#{$percent});
  }
  

  针对LibSass（不支持math.div），可直接使用除法运算符：

  @function su-span($span-width, $container: 14.75) {
    $percent: ($span-width / $container) * 100%;
    @return calc(#{$percent});
  }
  

3. 强制使用Dart Sass构建 #

若GitHub Pages支持，可在_config.yml中配置使用Dart Sass，匹配本地编译环境：

sass:
  implementation: sass
  style: compressed
  sass_dir: _sass

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