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 10 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