!default 是一个 Sass 标志，表示对变量进行条件赋值——仅当变量之前未定义或为 null 时才赋值。请考虑以下代码片段
$variable: 'test' !default;对于 Sass 编译器来说，这行代码表示
将
$variable赋值为'test'，**但仅当**$variable未被赋值时。
以下为反例，说明了 !default 标志条件行为的另一面
$variable: 'hello world';
$variable: 'test' !default;
// $variable still contains `hello world`运行这两行代码后，$variable 的值仍然是第一行原始赋值中的 'hello world'。在这种情况下，第二行中的 !default 赋值被忽略，因为已经提供了值，不需要默认值。
样式库和 @use...with
Sass 中 !default 的主要动机是为了方便使用样式库，以及将其方便地包含到下游应用程序或项目中。通过将某些变量指定为 !default，库可以允许导入应用程序自定义或调整这些值，而无需完全复制样式库。换句话说，!default 变量本质上充当修改库代码行为的参数。
Sass 有一个专门用于此目的的语法，它将样式表导入与其相关的变量覆盖结合起来
// style.scss
@use 'library' with (
$foo: 'hello',
$bar: 'world'
);此语句的功能几乎与变量赋值后跟 @import 相同，如下所示
// style.scss - a less idiomatic way of importing `library.scss` with configuration
$foo: 'hello';
$bar: 'world';
@import 'library';这里的重要区别，以及 @use...with 更可取的原因，与覆盖的作用域有关。with 块使 Sass 编译器和任何阅读源代码的人都能清楚地了解——覆盖专门应用于在 library.scss 内部定义和使用的变量。使用此方法可以保持全局作用域的整洁，并有助于减少不同库之间变量命名冲突。
最常见的用例：主题自定义
// library.scss
$color-primary: royalblue !default;
$color-secondary: salmon !default:
// style.scss
@use 'library' with (
$color-primary: seagreen !default;
$color-secondary: lemonchiffon !default:
);此功能在实际应用中最普遍的示例之一是主题的实现。颜色调色板可以用 Sass 变量定义，!default 允许自定义该颜色调色板，同时所有其他样式保持不变（甚至包括混合或叠加这些颜色）。
Bootstrap 将其整个 Sass 变量 API导出，并在每个项目上设置了 !default 标志，包括主题颜色调色板，以及其他共享值，例如间距、边框、字体设置，甚至动画缓动函数和时间。即使在极其全面的样式框架中，这也是 !default 提供的灵活性的最佳示例之一。
在现代 Web 应用程序中，这种行为本身可以使用CSS 自定义属性和回退参数来复制。如果您的工具链尚未使用 Sass，则现代 CSS 可能足以用于主题目的。但是，我们将在接下来的两个示例中检查只能通过使用 Sass !default 标志解决的用例。
用例 2：条件加载 Web 字体
// library.scss
$disable-font-cdn: false !default;
@if not $disable-font-cdn {
@import url(''https://fonts.googleapis.com/css2?family=Public+Sans&display=swap'');
}
// style.scss
@use 'library' with (
$disable-font-cdn: true
);
// no external HTTP request is made当 Sass 利用其预处理器在 CSS 生命周期中的外观时，它开始显示其优势。假设您公司设计系统的样式库使用了自定义 Web 字体。它从 Google 的 CDN 加载——理想情况下尽可能快——但尽管如此，您公司中的一个独立的移动体验团队仍对页面加载时间表示担忧；对于他们的应用程序来说，每一毫秒都很重要。
为了解决这个问题，您可以在样式库中引入一个可选的布尔标志（与第一个示例中的 CSS 颜色值略有不同）。将默认值设置为 false，您可以在运行昂贵的操作（例如外部 HTTP 请求）之前，在 Sass @if 语句中检查此特性标志。您的库的普通使用者甚至不需要知道此选项的存在——默认行为对他们有效，他们会自动从 CDN 加载字体，而其他团队可以访问他们需要的切换功能，以便微调和优化页面加载。
CSS 变量不足以解决此问题——尽管可以覆盖 font-family，但 HTTP 请求已经发出以加载未使用的字体。
用例 3：视觉调试间距标记
!default 特性标志还可以用于创建用于开发期间的调试工具。在此示例中，一个可视化调试工具为间距标记创建了颜色编码的叠加层。基础是一组根据升序“T 恤尺寸”（也称为“xs”/“特小”到“xl”/“特大”）定义的间距标记。从此单个标记集中，Sass @each 循环生成每种将该特定标记应用于填充或边距的实用程序类的组合，在每一侧（顶部、右侧、底部和左侧分别或全部四侧一次）。
由于这些选择器都在嵌套循环中动态构建，并且单个 !default 标志可以将渲染行为从标准（边距加填充）切换到彩色调试视图（使用相同尺寸的透明边框）。此颜色编码视图可能与设计人员可能交付用于开发的交付物和线框图非常相似——尤其是在您已经在设计和开发之间共享相同的间距值时。将可视化调试视图并排放置与模型可以帮助快速直观地发现差异，以及调试更复杂的样式问题，例如边距折叠行为。
同样——到编译此代码以进行生产时，生成的 CSS 中将没有任何调试可视化，因为它将完全替换为相应的边距或填充语句。
进一步阅读
这些只是 Sass !default 在实际应用中的一些示例。在将此技术应用于您自己的变体时，请参考这些文档资源和使用示例。