Как объединить несколько классов в один?

Question

У меня есть несколько классов, предоставляемых структурой Quasar . При наличии нескольких компонентов, которые должны выглядеть одинаково, у меня есть повторяющийся шаблон, такой как

<div class="q-ma-xs text-h6 bg-black">one</div>
<div class="q-ma-xs text-h6 bg-black">two</div>
<div class="q-ma-xs text-h6 bg-black">three</div>
(...)

Я ищу способ объединить все классы в один, чтобы глобальная модификация применялась к все элементы.

Я надеялся, что можно использовать несколько @extend записей в одном новом определении класса, но, похоже, это не так.

Есть ли способ CSS / SCSS / SASS для такого слияния?

Мой план резервного копирования - использовать <div :class="myElement">one</div>, где myElement определено в разделе скриптов (реактивность в Vue), но я бы предпочел более родное решение.

Answer 1

Вы можете иметь несколько значений в @extend

.myNewClass {
   @extend .q-ma-xs, .text-h6, .bg-black;
}

Но я был бы очень осторожен с этим. @extend делает некоторые странные вещи с иерархией селекторов.

Лучшим решением может быть создание миксинов для каждого из классов и @include миксинов.