SASS中的`!default`标志

本文解释了SASS中的 !default 标志。

我们将详细解释 !default 标志，并通过实际示例展示如何使用它。

YouTube Video

SASS中的!default标志

SASS中的!default标志是提升样式表模块化和可复用性的重要工具。通过使用该标志，你可以为变量设置默认值，同时允许在其他地方定义的值优先。下面我们将详细解释!default标志，并通过实际示例展示其用法。

!default标志是SASS特有的功能，用于为变量设置默认值。添加该标志后，将实现以下行为：。

• 指定默认值 只有当变量未在其他地方定义时才设置该值。

• 控制优先级 如果变量已经被定义，其值将不会被覆盖。

该功能在构建模块和库时尤其有用。用户可以设置自定义值，如果未指定，则使用默认值。

基本示例

下面的代码演示了!default标志的基本用法。

1// _variables.scss
2$primary-color: blue !default;

• 使用 !default 标志定义默认变量 $primary-color。

1// main.scss
2@use 'variables' with (
3    $primary-color: red
4);
5
6body {
7    background-color: variables.$primary-color;
8}

• 使用 @use 导入变量，并通过 with 覆盖 $primary-color。

输出CSS

1body {
2    background-color: red;
3}

• 在此例中，由于 $primary-color 在 main.scss 中被设置为 red，所以 _variables.scss 中定义的 blue 不会被使用。

当变量未定义时

如果变量未在main.scss中定义，则会使用默认值。

1// main.scss
2@use 'variables';
3
4body {
5    background-color: variables.$primary-color;
6}

• 由于导入变量时没有进行覆盖，_variables.scss 中为 $primary-color 定义的默认值 blue 被应用。

输出CSS

1body {
2    background-color: blue;
3}

在嵌套模块中的用法

在模块中使用!default可以实现灵活的自定义。

1// _variables.scss
2$primary-color: blue !default;
3$button-color: blue !default;

• 使用 !default 标志定义 $primary-color 和 $button-color。

1// _buttons.scss
2@use 'variables';
3
4.button {
5    color: variables.$button-color;
6}

• 导入 variables 模块，并使用 $button-color 变量指定 .button 的颜色。

1// main.scss
2@use 'variables' with (
3    $button-color: orange
4);
5
6@use 'buttons';

• 使用带有 with 的 @use 将 $button-color 覆盖为 orange，并使用 buttons 模块。

输出CSS

1.button {
2    color: orange;
3}

• 这样，模块既提供了默认值，也能尊重用户自定义的设置。

注意事项

在使用!default标志时，应注意以下几点：。

• 选择合适的默认值 默认值应覆盖常见的使用场景。

• 有意的设计 使用一致的变量名，避免与其他模块产生冲突。

• 顺序校验 为了让!default标志如预期工作，必须正确管理变量覆盖的顺序。

实际场景

主题切换

例如，在创建支持主题的库时，可以使用!default提供可自定义的默认值。

1// _theme.scss
2$background-color: white !default;
3$text-color: black !default;
4
5body {
6    background-color: $background-color;
7    color: $text-color;
8}

• 为主题使用 !default 标志定义 $background-color 和 $text-color，并将它们应用于 body。

1// main.scss
2@use 'theme' with (
3    $background-color: #f0f0f0
4);

• 通过 @use 和 with 覆盖 $background-color 来自定义主题。

输出CSS

1body {
2    background-color: #f0f0f0;
3    color: black;
4}

可复用组件

在可复用的按钮组件中，你可以提供默认样式，同时允许用户覆盖颜色。

 1// _buttons.scss
 2$button-bg: #007bff !default;
 3$button-color: #ffffff !default;
 4
 5.button {
 6    background-color: $button-bg;
 7    color: $button-color;
 8    padding: 0.5em 1em;
 9    border-radius: 4px;
10}

• 通过 !default 定义按钮的默认背景色和文字颜色，并应用样式。

1// main.scss
2@use 'buttons' with (
3    $button-bg: #28a745
4);

• 通过 @use 和 with 覆盖 $button-bg 来自定义按钮颜色。

输出CSS

1.button {
2    background-color: #28a745;
3    color: #ffffff;
4    padding: 0.5em 1em;
5    border-radius: 4px;
6}

!default标志总结

在构建模块和库时，SASS中的!default标志是一个强大的工具。它提升了可复用性，并支持灵活的自定义。

您可以在我们的YouTube频道上使用Visual Studio Code跟随上述文章进行学习。 请也查看我们的YouTube频道。

YouTube Video