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

Question

在这些函数中，我编译rem为px和：empx

\n

$base: 16 !default;\n\n@function scut-strip-unit ($num) {\n  @return $num / ($num * 0 + 1);\n}\n\n@function rem ($pixels) {\n  @return scut-strip-unit($pixels) / $base * 1rem;\n}\n@function em ($pixels, $context: $base) {\n    @return #{$pixels/$context}em;\n  }\n

\n

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

\n

Error\nDeprecation Warning: Using / for division outside of calc() is deprecated and will be removed in \nDart Sass 2.0.0.\n\nRecommendation: math.div(scut-strip-unit($pixels), $base) or calc(scut-strip-unit($pixels) / $base)\n\nMore info and automated migrator: https://sass-lang.com/d/slash-div\n\n  \xe2\x95\xb7\n8 \xe2\x94\x82   @return scut-strip-unit($pixels) / $base * 1rem;\n  \xe2\x94\x82           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n  \xe2\x95\xb5\n\nDeprecation Warning: Using / for division outside of calc() is deprecated and will be removed in \nDart Sass 2.0.0.\n\nRecommendation: math.div($pixels, $context) or calc($pixels / $context)\n\nMore info and automated migrator: https://sass-lang.com/d/slash-div\n\n   \xe2\x95\xb7\n11 \xe2\x94\x82     @return #{$pixels/$context}em;\n   \xe2\x94\x82               ^^^^^^^^^^^^^^^^\n   \xe2\x95\xb5\n   \n

\n

Answer 1

将不再支持在函数/之外进行划分。以下是形成该文档的calc原因的概述：

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

您应该使用math.divfrom sass:math，作为示例，如下所示：

@use "sass:math";

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

或者使用/inside calc，如下所示：

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