使用css3变量修改elementUI原始样式

在使用elementUI的过程中，官方提供了修改SCSS变量和命令行工具实现自定义主题的方式。

不过，这种方式主要是从整体上进行样式修改，比如修改input组件的样式后，在哪里使用，都是相同的样式。

在实际使用过程当中，不同的页面，或者相同的页面中，同一个组件的样式可能存在不一样的情况。

当前，我的处理方式是在使用的时候，进行样式覆盖。为了统一管理，使用css3的var变量。

注意事项：

1、覆盖elementUI原始样式，不能给style加scoped属性，否则不生效。为了避免污染全局样式，对本vue文件的div添加作用范围，例如#myIndex。其他样式使用scoped限定作用域。

2、使用css3的变量功能，可以方便进行样式调整。需要注意的是变量的calc方法使用。

height:var(menu-height-size)px 是有问题的，数字和px之间有空格，需要使用计算功能--menu-submenu-top:calc((var(--menu-height-size) + 5)*1px);