How to merge several classes in one?

Question

I have several classes provided by the Quasar framework. When having several components which are supposed to look the same, I have a repetitive pattern such as

<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>
(...)

I am looking for a way to combine all the classes in one, so that a global modification is applied to all elements.

I was hoping that it is possible to use several @extend entries in one new class definition but it does not seem to be the case.

Is there a CSS/SCSS/SASS way to do such a merge?

My backup plan is to use <div :class="myElement">one</div> where myElement is defined in the scripts section (reactivity in Vue) but I would prefer a more native solution.

Answer 1

You can have multiple values in @extend

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

But I would be really careful with that. @extend does some strange stuff with selector hierarchy.

A better solution might be to create mixins for each of the classes and @include the mixins.