创建一个存放变量的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>