如何添加“定向媒体查询”来引导4 sass媒体查询

Posted 2021-04-13

我在我的scss文件中使用“vanilla”bootstrap 4 sass media query：

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

我知道如果我使用CSS宽度媒体查询我可以将它与方向媒体查询耦合，但我想使用sass框架。我想在它们中添加方向媒体查询，即XS。因此它是具体的。因为你知道bootrap 4现在不支持方向查询（奇怪）。

我试图以不同的方式将“方向查询”与“SASS引导媒体查询（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引导媒体查询（xs）”连接起来？或者如何通过嵌套来使其特定于XS断点。

谢谢

答案

我找到了解决方案。

可以通过嵌套来组合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; } 
  }
} 

注意：我没有将“和”放在变量值中：“和（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;
  }
}

我希望它能帮助社区。

另一答案

我在Bootstrap之外使用它。您应该能够将它与Bootstrap或任何其他框架一起使用，从而为您的媒体查询提供更大的灵活性。

// Extra map functions by Hugo Giraudel
@function map-deep-get($map, $keys...) {
  @each $key in $keys {
    $map: map-get($map, $key);
  }
  @return $map;
}

@function map-has-keys($map, $keys...) {
  @each $key in $keys {
    @if not map-has-key($map, $key) {
      @return false;
    }
  }
  @return true;
}

@function map-has-nested-keys($map, $keys...) {
  @each $key in $keys {
    @if not map-has-key($map, $key) {
      @return false;
    }
    $map: map-get($map, $key);
  }
  @return true;
}

这些是额外的地图函数Hugo Giraudel写的。 map-deep-get基本上是一个简化的嵌套map-get函数。 map-has-keys就像map-has-key，它内置于sass中，但检查多个键。 map-has-nested-keys通过检查嵌套键来扩展它。这对于这种方法至关重要。我肯定会研究他建造的额外Sass功能。我很容易找到几乎所有的用途。

// Map
$sizes: (
  null: (
    breakpoint: 0,
    container: 100%
  ),
  xs: (
    breakpoint: 480px,
    container: 464px
  ),
  sm: (
    breakpoint: 768px,
    container: 750px
  ),
  md: (
    breakpoint: 992px,
    container: 970px
  ),
  lg: (
    breakpoint: 1200px,
    container: 1170px
  )
);

这是一个简单的断点映射。我通常使用它作为我项目中所有设置的基本映射，因此我将包括基本字体大小等内容。

// Breakpoint mixin
@mixin break($screen-min: null, $screen-max: null, $orientation: null) {
  $min: $screen-min;
  $max: $screen-max;
  $o: $orientation;
  $query: unquote("only screen");
  @if $min != null and $min != "" {
    @if map-has-nested-keys($base, sizes, $screen-min) {
      $min: map-deep-get($base, sizes, $screen-min, breakpoint);
    }
    @else {
      $min: $screen-min;
    }
    @if is-number($min) {
      $query: append($query, unquote("and (min-width: #{$min})"));
    }
  }
  @if $max != null and $max != "" {
    @if map-has-nested-keys($base, sizes, $screen-max) {
      $max: map-deep-get($base, sizes, $screen-max, breakpoint);
    }
    @else {
      $max: $screen-max;
    }
    @if is-number($max) {
      $query: append($query, unquote("and (max-width: #{$max})"));
    }
  }
  @if $orientation == landscape or $orientation == portrait {
    $o: $orientation;
    $query: append($query, unquote("and (orientation: #{$o})"));
  }
  @else {
    $o: null;
  }
  @media #{$query} {
    @content;
  }
};

这是混合物。您可以使用尺寸图（xs，sm，md，lg）中的键作为前两个参数，也可以使用自定义值（如30em）。第三个参数接受横向或纵向。如果需要，您甚至可以自定义make l = landscape和p = portrait中的mix。

此外，如果您只想要一个方向，则可以传递参数（null，null，landscape）。

为清楚起见，这里有一些例子：

@include break(null, md, landscape) {
  ...
}

@include break(null, null, landscape) {
  ...
}

@include break(md) {
  ...
}

@include break(null, md) {
  ...
}

@include break(480px) {
  ...
}

输出：

@media only screen and (max-width: 992px) and (orientation: landscape) {
  ...
}
@media only screen and (orientation: landscape) {
  ...
}
@media only screen and (min-width: 992px) {
  ...
}
@media only screen and (max-width: 992px) {
  ...
}
@media only screen and (min-width: 480px) {
  ...
}