在 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、定义常量
-- -------------------- ---- ------- --------------- ------- -------- -------- ----------------- ------- -------- -------- --------------- ------- -------- -------- -------------- ------- -------- -------- ------------ ------- -------- -------- --------------- ------- -------- -------- ----- - ----------------- ----------------- ------- --- ----- --------------- ------ ------------ -
以上代码定义了一些颜色常量，它们的默认值分别为 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