Scss(sass) debugging and Breaking Change: Slash as Division

Sass currently treats / as a division operation in some contexts and a separator in others. This makes it difficult for Sass users to tell what any given / will mean, and makes it hard to work with new CSS features that use / as a separator.

If you tried to use '/' in your dart-scss in lateest version, you can see this alert

Deprecation Warning: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(1, $x)

More info and automated migrator: https://sass-lang.com/d/slash-div

It is from https://sass-lang.com/documentation/breaking-changes/slash-div

so I should use different way '/' to 'math.div()'.

so I tried to use 'math.div()', instead of '/' for my scss files, and I used @debug

Use the '@debug' first.

for example, My code was like this with '/'

$defaultSize: 16px;

@function before($px) {
  $x: $defaultSize;
  $result1: (1 / $x * $px) + rem;
  @debug "result1:" $result1;
  @return $result1;
}

and Changed one is here

@function after($px) {
  $x: $defaultSize;
  $result2: (math.div(1, $x) * $px) + rem;
  @debug "result2:" $result2;
  @return $result2;
}

and

@debug remtest(10);
@debug remtest2(10);

and type this to watch debugging in console

sass src/App.scss src/test.scss
(sass input.scss output.scss)

then you can check your results on your console

src/App.scss:339 Debug: "result1" 0.625rem
src/App.scss:344 Debug: 0.625rem
N180702ui-MacBookPro$ sass src/App.scss src/test.scss
src/App.scss:329 Debug: "result2:" 0.625rem
src/App.scss:340 Debug: 0.625rem
Deprecation Warning: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(1, $x)

More info and automated migrator: https://sass-lang.com/d/slash-div