如何将“方向媒体查询”添加到 Bootstrap 4 sass 媒体查询

Question

我在我的 scss 文件中使用“vanilla”bootstrap 4 sass 媒体查询：

@include media-breakpoint-up(xs){}
@include media-breakpoint-up(sm){}
@include media-breakpoint-up(lg){}
@include media-breakpoint-up(xl){}

我知道如果我使用 css 宽度媒体查询，我可以将它与方向媒体查询结合起来，但我想使用 sass 框架。我想在其中一个 XS 中添加方向媒体查询。因此它是具体的。因为如您所知，bootsrap 4 目前不支持方向查询（奇怪）。

我尝试以不同的方式将“方向查询”与“SASS bootstrap media query (xs)”连接起来，但我总是遇到 sass 错误。

因此，我所做的是将其嵌套在 SASS 引导媒体查询 (xs) 中：

@include media-breakpoint-up(xs){

... some SCSS rules

  @media (orientation: landscape){
     header{
     display:none !important;   
     } 
     .navbar{ 
     display:none !important;   
     } 
  }
}

我什至认为它嵌套在 XS 查询中的问题是它适用于所有断点。就像它没有考虑嵌套一样。

我的问题：如何将“方向查询”与“SASS bootstrap media query (xs)”连接起来？或者如何通过嵌套使其特定于 XS 断点。

谢谢

Answer 1

我找到了解决方案。

可以通过嵌套来组合 sass mixin，因此我在 _mixins.scss 文件中创建了以下 mixin：

@mixin orientation($direction) { 

  $orientation-landscape: "(orientation:landscape)"; 
  $orientation-portrait: "(orientation:portrait)";

  @if $direction == landscape {
    @media #{$orientation-landscape} { @content; } 
  }
  @if $direction == portrait {
    @media #{$orientation-portrait} { @content; } 
  }
} 

注意：我没有将“and”放在变量值中：“and（orientation：landscape）”。我想 SASS 或 bootstrap 自动放置它。

然后在我的 SCCS 文件中添加了以下规则：

@include media-breakpoint-down(sm) {
  @include orientation(landscape) {
    .path-frontpage header {
      display: none !important;
    }
    .path-frontpage .navbar {
      display: none !important;
    }
  }
}

注意：在我的第一篇文章中，我说我嵌套的 CSS 规则应用于所有断点，这是因为当生成 CSS 时，未写入 SASS Bootstrap 4 XS 断点，我想这是因为该值为 0 .因此方向媒体查询没有与最小宽度值结合。因此，我将该值更改为最大宽度而不是最小宽度，因为 Bootstrap 4 SM 断点的值为 576px。

CSS 文件中的结果就是我想要的：

@media (max-width: 767.98px) and (orientation: landscape) {
  .path-frontpage header {
    display: none !important;
  }
  .path-frontpage .navbar {
    display: none !important;
  }
}

我希望它能帮助社区。