Media selectors "extending" bootstrap SASS classes

Question

On a site I'm developing w/ Bootstrap/SASS (SCSS) I'd like to have a Bootstrap button group (.btn-group) become a vertical group (.btn-group-vertical) using media selectors, rather than JavaScript. However, the well-known issues that @extend will not work inside a media selector, has left me befuddled. E.g., this raises an error:

.navGroup {
    @extend .mt-1;
    @extend .btn-group;
    @include media-breakpoint-down(xs) {
        @extend .btn-group-vertical;
    }
}

If I were developing from scratch I'd rewrite .btn-group and .btn-group-vertical to simply @include a mixin, so that I could do something like:

.navGroup {
    @extend .mt-1;
    @include media-breakpoint-up(xs) {
        @include btn-group-include();
    }
    @include media-breakpoint-down(xs) {
        @include btn-group-vertical-include();
    }
}

I would rather not change the original bootstrap _buttonGroup.scss file, since it will be overwritten at the next release/update. So I'm currently needing to copy and past the whole .btn-group-vertical definition:

.navGroup {
    @extend .mt-1;
    @extend .btn-group;
    @include media-breakpoint-down(xs) {
        flex-direction: column;
        align-items: flex-start;
        /* etc. for 70 lines */
    }
}

Is there a way to easily convert an existing class definition into a mixin within Sass that would solve such a problem?

Have you seen [this blog post?](https://www.sitepoint.com/cross-media-query-extend-sass/) — wiiiiilllllll, Jul 16 '18 at 13:13
Yes, that would work if I were editing the _buttonGroup.scss file directly, but it doesn't work without editing the bootstrap files themselves, which is the main thing I'm trying to solve with the question. — Michael Scott Asato Cuthbert, Jul 16 '18 at 18:12

score 0 · Answer 1 · answered Jun 16 '18 at 02:43

0

You could try using the flex classes. Sorry, I don't know the markup for the navGroup.

<div class="d-flex flex-column">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

You can apply these per breakpoint. Checkout https://getbootstrap.com/docs/4.0/utilities/flex/

answered Jun 16 '18 at 02:43

Gavin Bruce

1,799
16
28

awarding bounty as only answer -- it didn't solve the particular Q., but thanks Gavin for trying! – Michael Scott Asato Cuthbert Jul 22 '18 at 21:54

Media selectors "extending" bootstrap SASS classes

1 Answers1