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是不一样的，什么情况会被赋值？当值的权重打过之前的值，就能赋值。

转载于:https://www.cnblogs.com/stooges/p/6929229.html