SASS 提供了一个非常方便的功能，即为变量设置默认值。这个特性可以让你在定义变量时不必担心是否会被其它部分覆盖。
!default 关键字
在 SASS 中，你可以使用 !default 关键字来设置变量的默认值。如果变量已经被定义过了，那么后面的定义就会被忽略。
例如，我们可以像下面这样定义一个 $primary-color 变量：
$primary-color: blue !default;
这里的 !default 表示如果 $primary-color 变量之前已经被定义，那么就沿用之前的定义，否则就使用默认值 blue。
使用默认值
对于使用变量的情况，如果你想要使用默认值，而又希望在其它地方可以覆盖这个默认值，可以像下面这样写：
$header-background-color: $primary-color !default;
这里的 $header-background-color 会使用 $primary-color 的默认值 blue，除非在之后另有定义。
带参数的 mixin
一个常见的应用场景是使用带参数的 mixin 来设置默认值。下面是一个简单的例子：
-- -------------------- ---- ------- ------ ------------------------- --------------- - ----------------- ------------------ - ------- - -------- ------- - --------------- - -------- ----------------------- -
在这个例子中，我们声明了一个 button mixin，它可以接受一个 $background-color 参数，并使用 $primary-color 的默认值。在 .button 类中使用 button mixin 时，不传入任何参数，就会使用 $primary-color 的默认值。而在 .primary-button 类中使用时，传入 $primary-color 变量来覆盖默认值。
总结
在 SASS 中使用 !default 关键字为变量设置默认值是一种非常实用的技巧，可以避免定义重复的变量，同时也让变量的使用更加灵活。希望这篇文章对你学习 SASS 带来一些指导意义。
示例代码：
-- -------------------- ---- ------- --------------- ---- --------- ------------------------- -------------- --------- ------ ------------------------- --------------- - ----------------- ------------------ - ------- - -------- ------- - --------------- - -------- ----------------------- -
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6517844595b1f8cacdfb3128