Sass to convert px to rem

pxtorem.scss

/**
 * Convert font-size from px to rem with px fallback
 *
 * @param $size - the value in pixel you want to convert
 *
 * e.g. p {@include fontSize(12px);}
 * 
 */
@use "sass:math";

// Function for converting a px based font-size to rem.
@function calculateRem($size) {
 @return math.div($size, 16px) * 1rem;
}

// Mixin that will include the fall back px declaration as well as the calculated rem value.
@mixin fontSize($size) {
  font-size: $size;
  font-size: calculateRem($size);
}

The problem with the above function is that it returns a string which can not be used in further numerical calculations.

This works better:

@function rem($size) {
  @return $size / 16px * 1rem;
}

@sarutole nice. will update

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($size, 16px)
More info and automated migrator: https://sass-lang.com/d/slash-div
@return $size / 16px * 1rem;

@sh4rov Thanks! Updated.

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($size, 16px)
More info and automated migrator: https://sass-lang.com/d/slash-div
@return $size / 16px * 1rem;

What do you use for compilation? I just realized that It doesn't compile properly with gulp so I returned to "/" and got this deprecation warning again but it's works

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($size, 16px)
More info and automated migrator: https://sass-lang.com/d/slash-div
@return $size / 16px * 1rem;

What do you use for compilation? I just realized that It doesn't compile properly with gulp so I returned to "/" and got this deprecation warning again but it's works

Type @use "sass:math"; at the top of the file