Scattered around my code I have the classes d-md-flex flex-md-row flex-wrap always called together. Ideally, I would like to combine these into one class called mobile-row.
For example instead of having
<div class="d-md-flex flex-md-row flex-wrap"> ... </div>
I would have
<div class="mobile-row"> ... </div>
In my sass code, I tried to combine the classes together using @extend
@import '~vuetify/src/styles/styles.sass'
@import '~vuetify/src/styles/main.sass'
.mobile-row
@extend .d-flex, .flex-md-row, .flex-wrap
It seems to work, but the styling is vastly different. All the gutters are gone, and the size of all the elements shrunk drastically.
For example, here is the output on a screen for the medium breakpoint. Where the expected result is from adding the classes directly to the div tag, and the result is from the compiled sass.
Is there a way to do what I am trying to accomplish? Am I approaching this the wrong way? Or is this just a foolish effort?