scss 覆蓋 原有變量

在scss的variables.scss 中會有很多的變量

$color: red !default;
$body-color: $color !default;

這些!default 和我們理解的!important 恰恰相反，default是默認的意思，在variables.scss中全部的變量字尾都有!default.

那么要覆蓋我們就必須在variables之前放你的變量

// Core variables and mixins
@import "my-variables.scss";
@import "variables";
@import "mixins";
@import "custom";

在不同的狀態下，賦值需要小心，參照一下例子

$color: red !default;
$body-color: $color !default;

$color: white !default;
$body-color: $color !default;

p {
    color: $body-color; //red 
}

　　

$color: red;
$body-color: $color !default;

$color: white !default;
$body-color: $color !default;

p {
    color: $body-color; //red
}

　　

$color: red !default;
$body-color: $color !default;

$color: white;
$body-color: $color !default;

p {
    color: $body-color; //red
}

概念和javascript是不一樣的，什么情況會被賦值？當值的權重打過之前的值，就能賦值。