弃用警告：在 calc() 之外使用 / 进行除法已被弃用，并将在 Dart Sass 2.0.0 中删除

Question

在这些函数中，我将 rem 编译为 px 并将 em 编译为 px：

$base: 16 !default;

@function scut-strip-unit ($num) {
  @return $num / ($num * 0 + 1);
}

@function rem ($pixels) {
  @return scut-strip-unit($pixels) / $base * 1rem;
}
@function em ($pixels, $context: $base) {
    @return #{$pixels/$context}em;
  }

但是使用 Sass v1.49，我们面临这个错误：

Error
Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in 
Dart Sass 2.0.0.

Recommendation: math.div(scut-strip-unit($pixels), $base) or calc(scut-strip-unit($pixels) / $base)

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

  ╷
8 │   @return scut-strip-unit($pixels) / $base * 1rem;
  │           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in 
Dart Sass 2.0.0.

Recommendation: math.div($pixels, $context) or calc($pixels / $context)

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

   ╷
11 │     @return #{$pixels/$context}em;
   │               ^^^^^^^^^^^^^^^^
   ╵
   

Answer 1

将不再支持使用 / 在 calc 函数之外进行除法。以下是文档中的原因概述：

Sass 目前在某些上下文中将 / 视为除法运算，在其他上下文中将其视为分隔符。这使得 Sass 用户很难判断任何给定的 / 的含义，并且很难使用使用 / 作为分隔符的新 CSS 功能。

您应该使用 sass:math 中的 math.div：

@use "sass:math";

body {
  font-size: math.div(50, 16) * 1px;
}

或者在 calc 中使用 /：

body {
  font-size: calc(50 / 16) * 1px;
}

Answer 2

为了避免使用 sass:math，你可以使用

calc(scut-strip-unit($pixels) / $base)