SCSS !default預設變數

從名稱來看，!default是用來指定變數預設值的，事實也是如此。

在變數賦值之前， 利用!default為變數指定預設值。

也就是說，如果在此之前變數已經賦值，那就不使用預設值，如果沒有賦值，則使用預設值。

程式碼例項如下:

[Scss] 純文字檢視 複製程式碼
$content: "antzone" !default;
#main {
  content: $content;
}

編譯為css程式碼如下:

[CSS] 純文字檢視 複製程式碼
#main {
  content: "antzone"; 
}

由於在宣告預設值之前，並沒有變數的賦值，所以就使用預設值。

再來看一段程式碼例項:

[Scss] 純文字檢視 複製程式碼
$content:"softwhy.com";
$content: "antzone" !default;
#main {
  content: $content;
}

編譯成css程式碼如下:

[CSS] 純文字檢視 複製程式碼
#main {
  content: "softwhy.com"; 
}

由於在預設變數值宣告之前，就已經有變數賦值了，所以就不再使用預設值。

!default一個重要的作用就是，如果我們引入的他人scss檔案中的變數有預設值的設定，那麼我們就可以很靈活的來修改這些預設值，只要在這些匯入檔案之前引入就一個配置scss檔案即可,而無需修改他人的scss檔案，例如:

[Scss] 純文字檢視 複製程式碼
@import "config";
@import "variables";
@import "mixins";

只要將重新配置的變數值寫入config.scss檔案，即可實現修改variables.scss和mixins.scss中預設變數值。