Объедините несколько классов CSS в один - PullRequest
Новая
       11

Объедините несколько классов CSS в один

1 голос
/ 19 апреля 2019

В проекте Vue я хочу объединить несколько классов CSS, которые я использую, на двух элементах, чтобы очистить мой HTML.Мне сказали, что я могу сделать что-то подобное с Cli, но я понятия не имею, как. 

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

Ответы [ 2 ]

1 голос
/ 19 апреля 2019

Вы можете использовать LESS в своих файлах Vue и использовать псевдокласс extension для объединения стилей 

<style lang="less">
.class1{

}
.class2{

}
.common-class {
  &:extend(.class1);
  &:extend(.class2);
}
</style>
0 голосов
/ 19 апреля 2019

Вы всегда можете создать свойство 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-препроцессор, следует документам .

...