在我使用 Bootstrap/SASS (SCSS) 开发的网站上,我希望使用媒体选择器而不是 JavaScript 将 Bootstrap 按钮组 ( .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
简单地@include
一个混合,这样我就可以做这样的事情:.navGroup {
@extend .mt-1;
@include media-breakpoint-up(xs) {
@include btn-group-include();
}
@include media-breakpoint-down(xs) {
@include btn-group-vertical-include();
}
}
我宁愿不改变原来的 bootstrap
_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 类。抱歉,我不知道 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>
您可以为每个断点应用这些。结帐 https://getbootstrap.com/docs/4.0/utilities/flex/
关于sass - 媒体选择器 "extending"引导 SASS 类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50879747/