将几个CSS类合并为一个

Question

在Vue项目中，我想结合一些在两个元素上使用的css类，以便整理html。有人告诉我可以使用cli做类似的事情，但是我不知道该怎么做。

.common-class {
  @apply .class1 .class2 ...;
}

Answer 1

您可以在Vue文件中使用LESS，并使用extend伪类来合并样式

<style lang="less">
.class1{

}
.class2{

}
.common-class {
  &:extend(.class1);
  &:extend(.class2);
}
</style>

Answer 2

您始终可以创建一个computed属性，该属性返回这两个类的总和：

new Vue({
  el: "#app",
  computed: {
    combineStyles() {
      return 'foo bar'
    }
  }
})

.foo {
  color: red;
}

.bar {
  font-size: 2rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <p :class="combineStyles">foo bar</p>
</div>

不需要CSS预处理器。但是，如果您想使用某些CSS预处理器，请follow the docs。