前言

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

Logo

前往低代码交流专区

更多推荐