How to add "orientation media query" to bootstrap 4 sass media query

Question

i am using the "vanilla" bootstrap 4 sass media query in my scss files:

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

i know that if i use the css width media query i can couple it with the orientation media query, but i want to use the sass framework. I want to add the orientation media query in on of them, the XS one. thus it is specific. Because as you know bootsrap 4 is not supporting orientation query for now (strangely).

i tried to concatenat the "orientation query" with the "SASS bootstrap media query (xs)" in different way but i always have a sass error.

Thus What i did is to nest it in the SASS bootstrap media query (xs):

@include media-breakpoint-up(xs){

... some SCSS rules

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

The problem i have even tought it is nested into the XS query is that it apply to all breakpoint. it s like it does nt take into account to be nested.

My question: how to concatenate the "orientation query" with the "SASS bootstrap media query (xs)"? Or how to make it specific to the XS breakpoint by nesting it.

Thank you

Answer 1

I've found the solution.

It's possible to combine sass mixin by nesting them, thus I've created the following mixin in my _mixins.scss file:

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

Note: i didn't put the "and" in the variable value: "and (orientation:landscape)". SASS or bootstrap put it automatically i suppose.

Then in my SCCS file I've added the following rules:

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

Note: in my first post i was saying that the CSS rules I've nested was applied to all breakpoints, it s because when the CSS is generated the SASS Bootstrap 4 XS breakpoint of is not written, i suppose it's because the value is 0. thus the orientation media query was not combines with a min-width value. So i changed the value to a max-width instead of a min-width, as the Bootstrap 4 SM breakpoint have the 576px value.

The result in the CSS file is what i wanted:

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

I hope it will help the community.

Answer 2

I use this outside of Bootstrap. You should be able to use it with Bootstrap or any other framework, giving you more flexibility in your media queries.

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

These are extra map functions Hugo Giraudel wrote up. map-deep-get is basically a simplified nested map-get function. map-has-keys is just like map-has-key, which is built-in to sass, but checks for multiple keys. map-has-nested-keys expands on that by checking for nested keys. This is crucial for this method. I'd definitely look into the extra Sass functions he's built. I've quite easily found use for just about all of them.

// 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
  )
);

This is a simple breakpoint map. I usually use this as a base map for all settings on my projects, so I'll include things like base font-sizes and whatnot in it.

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

Here's the mixin. You can use the keys from the sizes map (xs, sm, md, lg) for the first two arguments, or you can use custom values (like 30em). The third argument accepts either landscape or portrait. You could even customize the mixin the make l = landscape and p = portrait if you wanted.

Additionally, if you only wanted, for example, an orientation, you could pass the arguments (null, null, landscape).

For clarity, here's some examples:

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

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

@include break(md) {
  ...
}

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

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

Output:

@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) {
  ...
}