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引导媒体查询（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断点。

谢谢

Answer 1

我找到了解决方案。

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

#shrink {
    position: relative;
    animation: myAnimation 500 forwards;
}

@keyframes myAnimation {
    0%   { opacity:  1; transform:scale(1);  }
    100% { opacity: .5; transform:scale(.5); }
}

注意：我没有在变量值中添加“ and”：“ and（orientation：landscape）”。我想SASS或引导程序会自动将其放置。

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

@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; } 
  }
}

注意：在我的第一篇文章中，我说过我嵌套的CSS规则适用于所有断点，这是因为生成CSS时，SASS Bootstrap 4 XS断点不是笔者认为，这是因为该值为0。因此，定向媒体查询未与最小宽度值组合。因此，我将值更改为最大宽度而不是最小宽度，因为Bootstrap 4 SM断点的值为576px。

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

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

我希望它将对社区有所帮助。

Answer 2

我在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）。第三个参数接受风景或肖像。如果需要，您甚至可以自定义混合效果，使l =横向和p =纵向。

此外，如果仅需要例如方向，则可以传递参数（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) {
  ...
}

如何在引导程序4 sass媒体查询中添加“定向媒体查询”

2 个答案: