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

前言

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

方法,使用css变量

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

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

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

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

参考文章

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

上一篇:经典算法大全1-河内之塔


下一篇:JavaScript学习Day29笔记