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.