今天就跟大家聊聊有關如何在SASS 中使用變量的默認值，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

創新互聯服務項目包括牙克石網站建設、牙克石網站制作、牙克石網頁制作以及牙克石網絡營銷策劃等。多年來，我們專注于互聯網行業，利用自身積累的技術優勢、行業經驗、深度合作伙伴關系等，向廣大中小型企業、政府機構等提供互聯網行業的解決方案，牙克石網站推廣取得了明顯的社會效益與經濟效益。目前，我們服務的客戶以成都為中心已經輻射到牙克石省份的部分城市，未來相信會繼續擴大服務區域并繼續獲得客戶的支持與信任！

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 中使用變量的默認值有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注創新互聯行業資訊頻道，感謝大家的支持。