vue自定义样式

在项目中常常遇到一些页面由后台定制样式呈现，这就需要在页面中动态绑定style，如若定制样式里包含了伪类、媒体查询、hover效果能样式，寻常的v-bind:style内联样式可能就无法满足需求，这里就记录了一个解决办法。

那么该如何操作呢，简单举个栗子：

首先，我们在需要定制的样式元素上定义一个css变量，命名规则为：--变量名，如下：

--color: red

你也可以在html标签上使用它

<!-- example.vue -->
<div :style="{ '--color': color }"></div>
...
data() {
  return {
    color: "#ff0"
  }
}

如何使用呢，如下：

// example.less
.className: {
  color: var(--color);
}