在行内样式 或 对象格式的样式中 使用scss变量

前言

scss可以通过$mcolor:color,设置变量，方便全局统一样式和后续修改整体风格。一般也不会写行内样式，所以用起来没什么问题。但是在使用uniapp及其第三方ui框架uview的时候，有的样式你还必须得写成行内。比如下面这个配置。必须写成对象格式的。所以需要在这里也能拿到scss定义的变量。

方法,使用css变量

/*uni.scss  scss文件*/
$testColor: red;

/*App.vue 全局的样式文件*/
body{
--difference:#{$testColor}; //将scss变量转换成css变量
}

/*test.vue 使用css变量*/
<view :style="{color:'var(--difference)'}">aaaaaaa</view>`

效果

参考文章

在CSS3变量定义中使用SCSS变量不起作用？
CSS var() 函数
Using SASS variables to generate inline CSS