How to merge several classes in one?

user_903011 0
Viewed 438

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.

sass css
2 Answers

To get @Bryce Howistson answer to work with @extend, I had to add

@import "node_modules/quasar/src/css/index";

In every .vue file I wanted to extend quasar classes (in the style tag at the end of the file).

To avoid importing all the components again (heavy index file with all quasar components styling). I went for a custom index file with the following imports:

// inside custom file: /src/css/quasar.extend.library.scss
@import "node_modules/quasar/src/css/flex-addon.sass";
@import "node_modules/quasar/src/css/variables.sass";
@import 'node_modules/quasar/src/css/core/animations.sass';
@import 'node_modules/quasar/src/css/core/colors.sass';
@import 'node_modules/quasar/src/css/core/elevation.sass';
@import 'node_modules/quasar/src/css/core/flex.sass';
@import 'node_modules/quasar/src/css/core/helpers.sass';
@import 'node_modules/quasar/src/css/core/mouse.sass';
@import 'node_modules/quasar/src/css/core/orientation.sass';
@import 'node_modules/quasar/src/css/core/positioning.sass';
@import 'node_modules/quasar/src/css/core/size.sass';
@import 'node_modules/quasar/src/css/core/touch.sass';
@import 'node_modules/quasar/src/css/core/transitions.sass';
@import 'node_modules/quasar/src/css/core/typography.sass';
@import 'node_modules/quasar/src/css/core/visibility.sass';
@import 'node_modules/quasar/src/css/core/dark.sass';
user_171744210

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.

user_62689140
Related