SCSS variable default 變數預設值及權重判斷

宣告SCSS變數時，尾綴!default，表示此變數接受前置覆蓋。

一般的SCSS變數，都遵守後位優先，接受後置覆蓋。意即：後來才宣告的變數會覆蓋之前宣告的同名變數（行數較高的變數會覆蓋之前行數較低的）。CSS property 的宣告特性也是如此。

$some-property: 200; $some-property: 100; @debug "some-property: #{$some-property}"// 100

前置覆蓋則是：在變數值後尾綴 !default（注意：驚嘆號前要加一個空格），即可接受比該行之前宣告的同名變數，覆蓋這個尾綴被標記為!default的變數值。換句話說，也可視為!default宣告放棄覆蓋前位他行的權力。因此!default宣告的權重整體來說，比實質宣告還弱。

$some-property: 200; $some-property: 100 !default; // 注意驚嘆號前要加一個空格 @debug "some-property: #{$some-property}"// 200

需注意的是，使用!default時，該行變數值依然會被後位宣告所覆蓋。將這點納入考量，判斷變數權重才會正確。

$some-property: 100 !default; $some-property: 300; @debug "some-property: #{$some-property}"// 300

當同名宣告只有!default在比較時，判斷原則為「前置優先」：

$some-property: 200 !default; $some-property: 100 !default; @debug "some-property: #{$some-property}"// 200

筆記

1. 在場選手只有!default在比較時，愈前面愈權重越高。
2. !default與實質宣告共存時，無論實質宣告在!default前後方，實質宣告都擁有較高權重。
3. 實質宣告的同名變數值則依後置覆蓋的思維比較個別權重。

$some-property: 300; // 權重第二 $some-property: 200 !default; // 權重第三 $some-property: 100 !default; // 權重第四 $some-property: 400; // 權重第一 

參考： 

1. 官方文件：https://sass-lang.com/documentation/variables/#default-values
   
2. 官方playground：https://sass-lang.com/playground/