SASS 中定義的變量，后設置的值會覆蓋舊的值。

$color: red;
$color: blue;
.btn {
color: $color;
}

編譯后為：

.btn {
color: blue; }

如果你編寫了一個 UI 庫提供 SASS 文件，可能會提供一些參數供用戶使用時自定義。而在 SASS 組件內部，我們需要應用上用戶設置的這些值。但是如果使用者沒有自定義變量的值，那這些變量應該有自己的默認值。

利用前面提到的覆蓋機制是不能實現的。因為無論是你在 @import UI 庫之前設置還是之后，都不能影響這個導入文件中的值。如果你設置的值在導入之前，那么 UI 庫中的變量因為在后面，所以你的設置會被覆蓋而不起作用；如果你的設置在導入之后，那更加不起作用了。

假設這是 UI 中的樣式文件：

_lib.scss

$color: red;
.btn {
color: $color;
}

在另一個文件中使用，并且試圖自定義變量的值：

page.scss

@import 'lib';
$color: blue;

或：

page.scss

$color: blue;
@import 'lib';

兩者編譯結果均為：

.btn {
color: red; }

!default

針對這種情況，SASS 提供了 !default 標識。將該標識應用于變量值后面，表示如果該變量沒有在其他地方定義或即便定義了但值為 null，那此處設置的默認值才生效，否則使用其他地方設置的那個值。

將上面 _lib.scss 進行改造：

_lib.scss

- $color: red;
+ $color: red!default;
.btn {
color: $color;
}

使用：

$color: blue;
@import "lib";

注意：需要將自定義的值先于 @import，否則也不生效。

此時編譯結果將是想要的那樣，應用上了外部自定義的變量值。

.btn {
color: blue; }

相關資源
 

SASS Documentation – Default Values
A Sass !default use case