前言
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