SASS 中的！default 关键字详解-JavaScript中文网-JavaScript教程资源分享门户

在 SASS 中，有一个非常有用的关键字——!default。它可以用来指定默认值，当变量没有被赋值时，就会使用这个默认值。本篇文章会详细解释!default关键字的用法和应用场景，并提供示例代码。

1、简介

在 SASS 中，定义变量时，可以使用 !default关键字来指定默认值。当这个变量没有被赋值时，就会使用这个默认值。具体用法如下：

$font-size: 16px !default;

以上代码定义了一个名为$font-size的变量，其默认值为16px。如果在后面代码中给$font-size赋值，就会使用后面的值；如果没有赋值，就会使用默认值。

2、应用场景

2.1、定义常量

在 SASS 中，使用!default关键字可以定义常量。常量是指不会被修改的变量，在后面的代码中不能被重新赋值。比如：

$primary-color: #007bff !default !global;

以上代码定义了一个名为$primary-color的变量，其默认值为#007bff。使用!global关键字可以向全局作用域暴露变量$primary-color，以便在其他 SASS 文件中使用。

2.2、定义可重写的变量

使用!default关键字还可以定义可重写的变量。这种变量可以在后面的代码中被重新赋值。比如：

$arr: [] !default;

以上代码定义了一个名为$arr的变量，其默认值为一个空数组。在后面的代码中，可以向$arr变量添加元素，而不会覆盖原先的值。

2.3、设置函数参数的默认值

使用!default关键字还可以设置函数参数的默认值。比如：

@function scale($value, $factor: 2) {
  @return $value * $factor;
}

以上代码定义了一个名为scale的函数，它有两个参数：$value 和 $factor，其中 $factor 默认值为 2。在使用函数时，如果不传入 $factor 参数，则会使用默认值。

3、示例代码

3.1、定义常量

$primary-color: #007bff !default !global;
$secondary-color: #6c757d !default !global;
$success-color: #28a745 !default !global;
$danger-color: #dc3545 !default !global;
$info-color: #17a2b8 !default !global;
$warning-color: #ffc107 !default !global;

.card {
  background-color: $secondary-color;
  border: 1px solid $primary-color;
  color: $info-color;
}

以上代码定义了一些颜色常量，它们的默认值分别为 Bootstrap 的颜色变量。在.card选择器中，使用了这些常量来定义背景色、边框色和文字颜色。

3.2、定义可重写的变量

$fonts: Helvetica, Arial, sans-serif !default;

body {
  font-family: $fonts;
}

// 如果需要添加更多字体，可以在这里重新赋值 $fonts 变量

以上代码定义了一个名为$fonts的变量，其默认值为"Helvetica, Arial, sans-serif"。在body选择器中，使用了这个变量来定义字体。如果需要添加更多字体，可以在后面重新赋值$fonts变量。

3.3、设置函数参数的默认值

@function scale($value, $factor: 2) {
  @return $value * $factor;
}

.element {
  font-size: scale(16px);
  padding: scale(10px, 3);
}

以上代码定义了一个名为scale的函数，它有两个参数：$value 和 $factor，其中 $factor 默认值为 2。在.element选择器中，分别使用了带一个参数和带两个参数的调用方式。

4、总结

使用!default关键字可以指定变量的默认值，在没有赋值时就会使用这个默认值。它可以用来定义常量、可重写的变量以及函数参数的默认值。同时还可以使用!global关键字将变量暴露到全局作用域中，方便在其他 SASS 文件中使用。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65a630ceadd4f0e0ffee4c79

SASS 中的！default 关键字详解