分三步走（vue中哦）
一.在css内声明变量
1.普通版本
2.组件版本
二.在html骨架内把css声明的变量加进去
1.普通版本
2.组件版本
三.用js控制这个变量使之产生效果
1.普通版本
2.组件版本
注释：
组件版本是我在公司开发时候遇到组件需要兼容多种需求的时候遇到的问题。所以我定义了一个参数进行传参控制某个div的高度。从而达到让公司同事用我的组件时，能够控制高度，不侵占客制化的solt插槽内容。
知识点：CSS变量——自定义属性
概念与特性
- 带有前缀 -- 的属性名，比如 --example--name，表示的是带有值的自定义属性，其可以通过 var 函数在全文档范围内复用
- CSS 自定义属性是可以级联的：每一个自定义属性可以多次出现，并且变量的值将会借助级联算法和自定义属性值运算出来
- 这意味着，同一个自定义属性名可以被多次赋值
变量范围
- CSS变量可以在任何元素内定义
- 将CSS自定义属性添加到:root使其可用于页面中的所有元素
- 如果在.container选择器内添加变量，则仅在.container 内可用（作用域问题）
JS与CSS变量进行交互
- 设置元素样式：
[el].style.setProperty（[属性名]，[值]） - 获取元素样式：
getComputedStyle（[el]） - 获取元素样式属性值：
[styles].getPropertyValue（[属性名]）
这里只提供知识点，不做过多的解读，样式朴素。一切都是因为我因为工作忙，没时间写文案搞样式
