calc expression in SASS

Question

In an SCSS file, I have this line of code:

@return calc((#{$span-width} / #{$container}) * 100%);

And it produces this error:

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

I don't understand where the -1 is coming from. What's more, the error only occurs when the site is being generated on GitHub but not on my machine. I have been struggling to remove the error for a while.

Some other versions that I have tried are:

@return percentage(math.div($span-width, $container));

@return math.div($span-width, $container) * 100%;

@return calc(($span-width / $container) * 100%);

@return calc(math.div($span-width, $container) * 100%)

I'm brand new to SASS and am only using .scss files that were included in a Jekyll theme, so I don't know how to provide an MWE in this case. Any help would be appreciated!

The full function:

@function su-span(
  $span,
  $columns,
  $gutters,
  $spread,
  $container-spread: $spread,
  $location: 1
) {
  $span: su-valid-span($span);
  $columns: su-valid-columns($columns);
  $gutters: su-valid-gutters($gutters);
  $spread: su-valid-spread($spread);

  @if (type-of($span) == 'number') {
    @if (not unitless($span)) {
      @return $span;
    }

    $location: su-valid-location($span, $location, $columns);
    $span: su-slice($span, $columns, $location, $validate: false);
  }

  @if _su-needs-calc-output($span, $columns, $gutters, $spread, not 'validate') {
    @return _su-calc-span($span, $columns, $gutters, $spread, $container-spread, not 'validate');
  }

  $span-width: _su-sum($span, $gutters, $spread, $validate: false);

  @if unitless($span-width) {
    $container-spread: su-valid-spread($container-spread);
    $container: _su-sum($columns, $gutters, $container-spread, $validate: false);
    @return #{calc((#{$span-width} / #{$container}) * 100%)};
  }

  @return $span-width;
}

Answer 1

The way I ultimately solved my problem was by changing the repository settings from "deploy from branch" to "GitHub Actions".