将几个 CSS 类合并为一个

Question

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

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

Answer 1

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

<style lang="less">
.class1{

}
.class2{

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

Answer 2

您始终可以创建一个 computed 属性 returns 这两个类组合：

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.

Combine several CSS classes into one