Menu icon Foundation
Multiple media queries

Hello ZF Community,

 

I want to know the right way to make a @media with multiple parameters like

small & landscape OR medium & portrait, IN GENERAL, ${size} & ${orientation}

 

I read media Docs and I try to use

@media screen and #{breakpoint(small only)} and #{breakpoint(landscape)} {
  // Some css for mobile landscape
}

But terminal foundation watch error output

Message:
    src/assets/scss/components/_hero.scss
Error: media query expression must begin with '('
        on line 20 of src/assets/scss/components/_hero.scss
>> 
   -----------^

 

My solution was to use nested  @include like

@include breakpoint(medium down) {
  @include breakpoint(landscape) {
    // styles for landscape medium down...
  }
}

 

The question: Which is the right way to achieve this combination( ${size} & ${orientation} ) in one(1) SASS query ?

 

Thanks.

 

mediaSassorientationqueries

Hello ZF Community,

 

I want to know the right way to make a @media with multiple parameters like

small & landscape OR medium & portrait, IN GENERAL, ${size} & ${orientation}

 

I read media Docs and I try to use

@media screen and #{breakpoint(small only)} and #{breakpoint(landscape)} {
  // Some css for mobile landscape
}

But terminal foundation watch error output

Message:
    src/assets/scss/components/_hero.scss
Error: media query expression must begin with '('
        on line 20 of src/assets/scss/components/_hero.scss
>> 
   -----------^

 

My solution was to use nested  @include like

@include breakpoint(medium down) {
  @include breakpoint(landscape) {
    // styles for landscape medium down...
  }
}

 

The question: Which is the right way to achieve this combination( ${size} & ${orientation} ) in one(1) SASS query ?

 

Thanks.

 

Stan Vranic 8 months ago

This forum is sucks. Nobody answer on questions.
Foundation team, if you want people using your template, hire someone who will answer on the questions.

 

All the best