Scss知识点之!default

在scss中定义变量时经常看到!default这个关键词,例如

$color: #fff !default;

!default表示默认值。给一个未通过!default声明赋值的变量赋值，此时，如果变量已经被赋值，不会再被重新赋值;但是如果变量还没有被赋值，则会被赋予新的值。

// scss style
$color: #000;
$color: #fff !default;
$background-color: #ccc !default;
.test {
    color: $color;
    background: $background-color;
}

// css style
.test {
    color: #000;
    background: #ccc;
}