重大变更:媒体查询 4 级
Sass 已添加对 CSS 媒体查询 4 级规范的支持。这最初与某些 Sass 特定语法冲突,因此这些语法被弃用,现在根据 CSS 标准进行解释。
- Dart Sass
- since 1.56.0
- LibSass
- ✗
- Ruby Sass
- ✗
由于 Sass 支持在括号化的媒体条件中使用几乎任何 Sass 表达式,因此添加对媒体查询 4 级的完全支持会改变一些构造的含义。具体来说:
-
@media (not (foo))
在历史上被 Sass 解释为@media (#{not (foo)})
,因此编译为@media (false)
。 -
@media ((foo) and (bar))
和@media ((foo) or (bar))
同样被解释为 SassScript 的逻辑运算符,分别编译为@media (bar)
和@media (foo)
。
幸运的是,这些情况在实践中很少出现。
过渡期过渡期 permalink
- Dart Sass
- since 1.54.0
- LibSass
- ✗
- Ruby Sass
- ✗
首先,我们为之前的模糊情况发出弃用警告。这些警告将提供如何保留现有行为或如何使用新的 CSS 语法的建议。
Can I Silence the Warnings?Can I Silence the Warnings? permalink
Sass provides a powerful suite of options for managing which deprecation warnings you see and when.
Terse and Verbose ModeTerse and Verbose Mode permalink
By default, Sass runs in terse mode, where it will only print each type of deprecation warning five times before it silences additional warnings. This helps ensure that users know when they need to be aware of an upcoming breaking change without creating an overwhelming amount of console noise.
If you run Sass in verbose mode instead, it will print every deprecation
warning it encounters. This can be useful for tracking the remaining work to be
done when fixing deprecations. You can enable verbose mode using
the --verbose
flag on the command line, or
the verbose
option in the JavaScript API.
⚠️ Heads up!
When running from the JS API, Sass doesn’t share any information across
compilations, so by default it’ll print five warnings for each stylesheet
that’s compiled. However, you can fix this by writing (or asking the author of
your favorite framework’s Sass plugin to write) a custom Logger
that only
prints five errors per deprecation and can be shared across multiple compilations.
Silencing Deprecations in DependenciesSilencing Deprecations in Dependencies permalink
Sometimes, your dependencies have deprecation warnings that you can’t do
anything about. You can silence deprecation warnings from dependencies while
still printing them for your app using
the --quiet-deps
flag on the command line, or
the quietDeps
option in the JavaScript API.
For the purposes of this flag, a "dependency" is any stylesheet that’s not just a series of relative loads from the entrypoint stylesheet. This means anything that comes from a load path, and most stylesheets loaded through custom importers.
Silencing Specific DeprecationsSilencing Specific Deprecations permalink
If you know that one particular deprecation isn’t a problem for you, you can
silence warnings for that specific deprecation using
the --silence-deprecation
flag on the command line, or
the silenceDeprecations
option in the JavaScript API.