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; }