在vue中使用css变量

p{color:var(--red)}使用变量LessScss预处理语言通常我们使用less等预处理语言来设置全局颜色管理color.less//DARK-THEME@base-bg:#001f3b;//@base-bg:#042d6b;@light-font-颜色：rgb(219、219、219)；@shadow-color：rgb(59、54、54)；@menu-active-color：rgb(193、194、196)；@table-head-color：rgba(69,107,150,0.808);@btn-悬停颜色：#0f2035；@原色：#39bfed；@原色不透明度：#39c0ed67；@bg-content:rgba(27,159,225,0.205);@bg-content-3:rgba(27,159,225,0.116);有时候在某些场景下我们需要在JS中使用这些颜色。比如我们在使用echarts的时候可以使用：export导出变量index.less//DARK-THEME@base-bg:#001f3b;//@base-bg:#042d6b;@light-font-color:rgb(219,219,219);@shadow-color:rgb(59,54,54);@menu-active-color:rgb(193,194,196);@table-head-color:rgba(69,107),150,0.808);@btn-hover-color:#0f2035;@primary-color:#39bfed;@primary-color-opacity:#39c0ed67;@bg-content:rgba(27,159,225,0.205);@bg-content-3:rgba(27,159,225,0.116);:export{primary:@primary-color;primaryOpacity:@primary-color-opacity;}component.vueimportcolorsfrom'../common/color.less'constchartOption={xAxis:{type:'value',splitLine:'none',axisLine:{lineStyle:{color:colors.primary}},},yAxis:{type:'category',splitLine:'none',axisLine:{lineStyle:{color:colors['primary']}},},}在vue3的样式中使用变量。Vue2通过传入varsexportdefault{data(){return{red:'red'}}}p{color:var(--red)}使用变量在vue3中我们可以在style中直接使用v-bind(attr)来使用变量.red{颜色：v-bind(color);}