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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。