css、scss统一样式

项目中经常会遇到全站样式统一的问题，现特针对颜色为例使用css -> scss的形式统一全局样式，方便维护；

// test.css文件代码：这个代码全局化（vue项目可以在App.vue引入文件或者vue.config.js内配置）

:root {
    --colorRed: red; // css全局变量必须以--开头
}

// 这个是全局样式
.className {
    color: var(--colorRed) // var(变量，[变量不存在时默认值]) -> var(--colorRed, 'blue')
}

// text.scss文件代码：scss可以使用css变量，但css无法使用scss变量

$colorRed: var(--colorRed)

// page.vue 页面使用

// 方式一：全局样式
<span class="className">我是一个文字</span>

// 方式二：css全局变量
<span class="test_style_1">我是一个文字</span>
<style>
.test_style_1 {
    color: var(--colorRed)
}
</style>

// 方式三：scss变量
<span class="test_style_2">我是一个文字</span>
<style>
@import "../text.scss"
.test_style_2 {
    color: $colorRed;
}
</style>