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
The way I ultimately solved my problem was by changing the repository settings from "deploy from branch" to "GitHub Actions".
I believe it’s caused by this nested interpolation:
Remove the outer one:
Alternatively, you could use:
To be fair, I don’t understand why you’re using interpolation here in the first place. This should work:
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.