重大变更:混合声明

CSS 正在改变其处理与嵌套规则混合的声明的方式,我们希望确保 Sass 与其行为相匹配。

迄今为止的故事迄今为止的故事 链接

从历史上看,如果您在 Sass 中混合使用嵌套规则和声明,它会将所有声明拉到规则的开头,以避免不必要地重复外部选择器。例如

游乐场

SCSS 语法

.example {
  color: red;

  a {
    font-weight: bold;
  }

  font-weight: normal;
}
游乐场

Sass 语法

.example
  color: red

  a
    font-weight: bold


  font-weight: normal

CSS 输出

.example {
  color: red;
  font-weight: normal;
}

.example a {
  font-weight: bold;
}

当首次引入纯 CSS 嵌套时,它的行为方式相同。但是,经过一些考虑,CSS 工作组决定将声明按其在文档中出现的顺序应用更有意义,就像这样

游乐场

SCSS 语法

.example {
  color: red;

  a {
    font-weight: bold;
  }

  font-weight: normal;
}


游乐场

Sass 语法

.example
  color: red

  a
    font-weight: bold


  font-weight: normal



CSS 输出

.example {
  color: red;
}

.example a {
  font-weight: bold;
}

.example {
  font-weight: normal;
}

弃用旧方式弃用旧方式 链接

兼容性
Dart Sass
自 1.77.7 起
LibSass
Ruby Sass

为了通知用户即将发生的更改并让他们有时间使他们的样式表与其兼容,目前在 Sass 中弃用了在嵌套规则之后使用声明。在未来的版本中,Dart Sass 将更改为匹配纯 CSS 嵌套产生的排序。

如果您想尽早采用新的 CSS 语义,您可以将嵌套声明包装在 & {}

游乐场

SCSS 语法

.example {
  color: red;

  a {
    font-weight: bold;
  }

  & {
    font-weight: normal;
  }
}
游乐场

Sass 语法

.example
  color: red

  a
    font-weight: bold


  &
    font-weight: normal


CSS 输出

.example {
  color: red;
}
.example a {
  font-weight: bold;
}
.example {
  font-weight: normal;
}


我能否静默警告?我能否静默警告? 链接

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

简洁和详细模式简洁和详细模式 链接

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

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

⚠️ 注意!

JS API运行时,Sass 不会在编译之间共享任何信息,因此默认情况下,它会为编译的每个样式表打印五次警告。但是,您可以通过编写(或要求您最喜欢的框架的 Sass 插件的作者编写)一个自定义 Logger来解决此问题,该 Logger 仅打印每个弃用的五次错误,并且可以在多个编译之间共享。

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

有时,您的依赖项会发出您无法解决的弃用警告。您可以使用命令行上的--quiet-deps 标志或 JavaScript API 中的quietDeps 选项静默来自依赖项的弃用警告,同时仍为您的应用程序打印这些警告。

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

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

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