sass中声明变量与运用

创建一个存放变量的scss文件便于统一管理
在里面声明变量

$colorA:      #FF6600 !default; 
$colorB:      blue !default; 
$colorC:      #666666 !default;

然后再调用的页面中导入，引用

<style lang="scss">
@import './assets/scss/config.scss';

.fontColor {
    color: $colorB;
}
</style>

关于!default

在分配给变量的值得后面添加!default表示默认值。
如果在此之前变量已经赋值了，就不适用默认值，如果没有则使用默认值；

<style lang="scss">
@import './assets/scss/config.scss';
/**colorD之前没有赋值*/
$colorD:red !default;

.fontColor {
    color: $colorD;
}
</style>

<style lang="scss">
@import './assets/scss/config.scss';
/**colorD之前已经赋值*/
$colorD:blue;
$colorD:red !default;

.fontColor {
    color: $colorD;
}
</style>