溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天就跟大家聊聊有關如何在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 中使用變量的默認值有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
