重大变化：纯 CSS if() 函数

Sass 的旧版 if() 函数正在被弃用，取而代之的是官方的 CSS if() 函数语法。此语法允许 Sass 和 CSS 条件自由混合使用。

兼容性:
Dart Sass
since 1.95.0
LibSass
✗
Ruby Sass
✗

2010 年，在添加 布尔值类型 之后不久，Sass 又添加了全局函数 if()，以便用户无需编写完整的 @if 规则 即可在单个表达式中轻松使用布尔值。此函数的签名是 if($condition, $if-true, $if-false)，如果 $condition 为 真实的，则返回 $if-true，否则返回 $if-false。

¥In 2010, shortly after adding the boolean value type, Sass added the global if() function as a way to easily use booleans in a single expression without having to write out an entire @if rule. This function had the signature if($condition, $if-true, $if-false) and returned $if-true if $condition was truthy and $if-false otherwise.

当时，浏览器甚至不支持 @media 查询，我们从未想过 CSS 有一天会支持自己的 if() 函数。但十五年后，浏览器开始支持 CSS if() 函数，为了保持与 CSS 的完全兼容，我们也必须做出相应的调整。

¥At the time, browsers didn’t even support @media queries and we never imagined that CSS might support its own if() function someday. But fifteen years later, support for the CSS if() function began landing in browsers and we had to do so as well in order to remain fully CSS-compatible.

Sass 现在支持 纯 CSS if() 语法，以及一个特殊的 sass(...) 条件，该条件用于求值 Sass 表达式。为了避免冗余并采用与 CSS 兼容性最佳的标准化方案，我们计划最终从语言中移除旧版的 if() 函数。

¥Sass now supports the plain-CSS if() syntax, as well as a special sass(...) condition that evaluates Sass expressions. In order to avoid redundancy and standardize on the most CSS-compatible option, we plan to eventually remove the legacy if() function from the language.

你可以使用 Sass 迁移器 将旧版的 if() 函数自动迁移到 CSS if() 语法。

¥You can use the Sass migrator to automatically migrate from the legacy if() function to the CSS if() syntax.

Playground

SCSS Syntax

@use 'sass:meta';

// Instead of if(true, 10px, 15px)
@debug if(sass(true): 10px; else: 15px);

// Instead of if(meta.variable-defined($var), $var, null)
@debug if(sass(meta.variable-defined($var)): $var);
Playground

Sass Syntax

@use 'sass:meta'

// Instead of if(true, 10px, 15px)
@debug if(sass(true): 10px; else: 15px)

// Instead of if(meta.variable-defined($var), $var, null)
@debug if(sass(meta.variable-defined($var)): $var)

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.