css中的变量赋值var()

在css中通过var()函数定义变量 动态修改样式

1.用来设置css的公共样式

<template>
    <div class='lq'>我是刘强的帽子</div>
</template>

<style>

根据document.documentElement.style.setProperty('--lq-bg-color', '#67C23A')可修改–lq-bg-color的参数
​.lq {
  width: 200px;
  height: 200px;
  background-color: var(--lq-bg-color);
}
</style>

2.用来设定变量 以element组件为例

动态的修改饿了么的组件样式 先看css代码

/deep/ .el-collapse-item__header {
            background-color: red;
            //动态渲染
            color: var(--collapse-color);
            font-size: var(--collapse-size);
            font-weight: var(--collapse-weight);
        }

html demo

<el-collapse-item :style="{ '--collapse-color': `${collapseColor}`,
                            '--collapse-size':`${collapseFontSize}`,
                            '--collapse-weight':`${collapseFontWeight}`
                         }">
</el-collapse-item>

在js中可以动态的进行赋值

collapseColor  collapseFontSize collapseFontWeight即可