sass/math-div

Why

CSS uses / as a separator (grid-area: 1 / 3, font: 1rem/1.5, aspect-ratio: 16 / 9), so $width / 2 means two different things to Sass and to CSS. Dart Sass warns on every division with / and will treat it as a separator in a future major version, at which point $gutter / 2 silently compiles to 16px/2, an invalid value the browser drops.

Fix

@use 'sass:math'; and write math.div($gutter, 2); inside calc() the slash is CSS and stays. Where you really want a slash in the output, use list.slash($a, $b) or interpolation. sass-migrator division src/**/*.scss rewrites a whole code base.

Examples

// bad
.col { padding-inline: $gutter / 2; width: (100% / 3); }
// good
@use 'sass:math';
.col { padding-inline: math.div($gutter, 2); width: math.div(100%, 3); }

Sources

• Sass docs, Breaking change - slash as division
• Sass docs, sass:math

Read it in the terminal

npx github:dawidolko/frontend-skills explain sass/math-div