重大变更：斜杠作为 除法

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