“媒体选择器”；扩展；引导SASS类

在一个我正在开发w/Bootstrap/SASS（scs）的站点上，我希望使用媒体选择器（而不是JavaScript）将一个引导按钮组（

.btn group

）变成一个垂直组（

.btn group vertical

）。然而，

@extend

在媒体选择器中不起作用的众所周知的问题让我感到困惑。例如，这会引发一个错误：

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

如果我是从头开始开发，我会将

.btn group

和

.btn group vertical

重写为简单的

@包含一个mixin，这样我就可以做如下操作：

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

我不希望更改原始引导
\u buttonGroup.scss
文件，因为它将在下一个版本/更新时被覆盖。因此，我目前需要复制并通过整个
。btn group vertical
定义：

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

有没有一种方法可以轻松地将现有的类定义转换为Sass中的mixin来解决这样的问题？
您可以尝试使用flex类。对不起，我不知道导航组的标记

<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>


弹性项目1
弹性项目2
弹性项目3

您可以对每个断点应用这些。签出
你看到了吗？是的，如果我直接编辑_buttonGroup.scss文件，这会起作用，但是如果不编辑引导文件本身，它就不起作用，这是我试图解决这个问题的主要问题。奖励赏金作为唯一的答案——它没有解决特定的问题，但感谢Gavin的尝试！