重大变更：斜杠作为 除法

Sass 目前将 / 视为某些情况下是除法运算，在其他情况下是分隔符。这使得 Sass 用户难以判断任何给定的 / 意味着什么，并且难以使用将 / 作为 分隔符的新 CSS 功能。

兼容性
Dart Sass
部分
LibSass
✗
Ruby Sass
✗

今天，Sass 使用 复杂的启发式方法 来确定 / 应该被视为除法还是分隔符。即使如此，作为分隔符，它只会生成一个难以从 Sass 内部检查的未加引号的字符串。随着越来越多的 CSS 功能，例如 CSS Grid 和 新的 rgb() 和 hsl() 语法 将 / 用作分隔符，这对 Sass 用户来说变得越来越痛苦。

因为 Sass 是 CSS 的超集，所以我们通过重新定义 / 为仅分隔符来匹配 CSS 的语法。/ 将被视为一种新的列表分隔符类型，类似于 , 在今天的行为。除法将改为使用新的 math.div() 函数编写。此函数的行为与 / 在今天的行为完全相同。

此弃用不会影响 calc() 表达式内部的 / 使用。

游乐场

SCSS 语法

@use "sass:math";

// Future Sass, doesn't work yet!
.item3 {
  $row: span math.div(6, 2) / 7; // A two-element slash-separated list.
  grid-row: $row;
}
游乐场

Sass 语法

@use "sass:math"

// Future Sass, doesn't work yet!
.item3
  $row: span math.div(6, 2) / 7 // A two-element slash-separated list.
  grid-row: $row

CSS 输出

.item3 {
  grid-row: span 3 / 7;
}

过渡期过渡期永久链接

兼容性 (math.div() 和 list.slash())
Dart Sass
自 1.33.0 起
LibSass
✗
Ruby Sass
✗

为了简化过渡，我们首先添加了 math.div() 函数。/ 运算符目前仍然执行除法，但在执行时也会打印弃用警告。用户应该将所有除法切换为使用 math.div() 代替。

💡 有趣的事实

请记住，您可以静默您无法控制的库的弃用警告！如果您使用的是命令行界面，则可以传递 --quiet-deps 标志，如果您使用的是 JavaScript API，则可以将 quietDeps 选项 设置为 true。

游乐场

SCSS 语法

@use "sass:math";

// WRONG, will not work in future Sass versions.
@debug (12px/4px); // 3

// RIGHT, will work in future Sass versions.
@debug math.div(12px, 4px); // 3
游乐场

Sass 语法

@use "sass:math"

// WRONG, will not work in future Sass versions.
@debug (12px/4px) // 3

// RIGHT, will work in future Sass versions.
@debug math.div(12px, 4px) // 3

斜杠分隔列表也将在过渡期内可用。由于它们目前无法使用 / 创建，因此将添加 list.slash() 函数来创建它们。您还可以将 "slash" 作为 $separator 传递给 list.join() 函数 和 list.append() 函数。

游乐场

SCSS 语法

@use "sass:list";
@use "sass:math";

.item3 {
  $row: list.slash(span math.div(6, 2), 7);
  grid-row: $row;
}
游乐场

Sass 语法

@use "sass:list"
@use "sass:math"

.item3
  $row: list.slash(span math.div(6, 2), 7)
  grid-row: $row

CSS 输出

.item3 {
  grid-row: span 3 / 7;
}
兼容性 (一等 calc)
Dart Sass
自 1.40.0 起
LibSass
✗
Ruby Sass
✗

或者，用户可以在 calc() 表达式内包装除法运算，Sass 会将其简化为单个 数字。

游乐场

SCSS 语法

// WRONG, will not work in future Sass versions.
@debug (12px/4px); // 3

// RIGHT, will work in future Sass versions.
@debug calc(12px / 4px); // 3
游乐场

Sass 语法

// WRONG, will not work in future Sass versions.
@debug (12px/4px) // 3

// RIGHT, will work in future Sass versions.
@debug calc(12px / 4px) // 3

自动迁移自动迁移永久链接

您可以使用 Sass 迁移器 自动更新您的样式表以使用 math.div() 和 list.slash()。

$ npm install -g sass-migrator
$ sass-migrator division **/*.scss

我可以静默警告吗？我可以静默警告吗？ 永久链接

Sass 提供了一套强大的选项来管理您看到哪些弃用警告以及 何时看到。

简短和详细模式简短和详细模式 永久链接

默认情况下，Sass 在简短模式下运行，它只会打印每种类型的弃用警告五次，然后它会静默其他警告。这有助于确保用户在需要了解即将发生的重大变更时知道，而不会产生过多的控制台 噪音。

如果您改为在详细模式下运行 Sass，它将打印它遇到的所有弃用警告。这对于跟踪修复弃用时要完成的剩余工作很有用。您可以使用命令行上的 --verbose 标志 或 JavaScript API 中的 verbose 选项 启用详细模式。

⚠️ 注意！

从 JS API 运行时，Sass 不会在编译之间共享任何信息，因此默认情况下，它会打印针对每个编译的样式表进行的五个警告。但是，您可以通过编写（或要求您最喜欢的框架的 Sass 插件的作者编写）一个 自定义 Logger 来解决此问题，该日志记录器每个弃用只打印五个错误，并且可以跨多个 编译共享。

静默依赖项中的弃用静默依赖项中的弃用 永久链接

有时，您的依赖项具有您无法控制的弃用警告。您可以使用命令行上的 --quiet-deps 标志 或 JavaScript API 中的 quietDeps 选项 静默来自依赖项的弃用警告，同时仍然为您的应用程序打印警告。

就此标志而言，“依赖项”是指任何不是从入口点样式表中进行一系列相对加载的样式表。这意味着来自加载路径的任何内容，以及通过自定义 导入器加载的大多数样式表。

静默特定弃用静默特定弃用 永久链接

如果您知道某个特定的弃用对您来说不是问题，则可以使用命令行上的 --silence-deprecation 标志 或 JavaScript API 中的 silenceDeprecations 选项 静默针对该特定弃用的警告。