skip to Main Content

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;
}

2

Answers


  1. Chosen as BEST ANSWER

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


  2. I believe it’s caused by this nested interpolation:

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

    Remove the outer one:

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

    Alternatively, you could use:

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

    To be fair, I don’t understand why you’re using interpolation here in the first place. This should work:

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

    I can’t test it without knowing what each of the functions used are doing and what values you’re using.
    Consider creating a runnable minimal complete reproducible example on sassmeister, if you need more help.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search