Cant use sass math.div?

I get this error when compiling bootstrap docs, i used math.div in my code in detriment of standard sass / operator.

Error: Error building site: TOCSS: failed to transform "scss/docs.scss" (text/x-scss): SCSS processing failed: file "/home/dev/projects/bootstrap/scss/_functions.scss", line 227, col 15: Invalid CSS after " [@return]( math": expected expression (e.g. 1px, bold), was ".div($v1, $v2);"
ERROR: "docs-build" exited with 255.

By default, Hugo transpiles Sass to CSS using LibSass, which does not support math.div. See:

Option 1: Use / instead of math.div

For example, instead of this:

@use "sass:math";

body {
  font-size: math.div(32px, 2);

do this:

body {
  font-size: (32px/2);

Option 2: Configure Hugo to use Dart Sass instead of LibSass


1 Like

As of today Option 2 does not work because (a) math.div was added to Dart Sass v1.33.0 on May 20, 2021, and (b) the latest pre-release of dart-sass-embedded (v1.0.0-beta.7) was created on Feb 24, 2021.

I suspect that the next release of dart-sass-embedded will support math.div.

1 Like

Thanks for replying, its a no goal for me today.