Cant use sass math.div?

support
1

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](https://github.com/return) math": expected expression (e.g. 1px, bold), was ".div($v1, $v2);"
ERROR: "docs-build" exited with 255.
2

By default, Hugo transpiles Sass to CSS using LibSass, which does not support math.div. See:
https://sass-lang.com/documentation/modules/math

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

See https://gohugo.io/hugo-pipes/scss-sass/#options.

1 Like
3

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
4

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

5

Vey helpfull thankyou,I am using koala to compile sass , your tip help me to compile math.div function. :pray: