sasscompass-sassbreakpoint-sass

Preferred way of writing vertical media queries with Sass' Breakpoint Extension


With the Sass extension Breakpoint, is there a preferred way to write vertical media queries that only have a single argument for the query value?

Here's an example of what I'd like to ultimately accomplish:

@media (max-height: 50em) {
  .item {
    font-size: 2em;
  }
}

Or, should I just do a plain, "on-the-fly" media query for these styles like such:

.item {
  @media (max-height: 50em) {
    font-size: 2em;
  }
}

Is this something that could possibly be handled with a variable?

My styles are "mobile first", so all of the other media queries on this site use Breakpoint's default "min-width" setting.

Thanks!


Solution

  • You can do the following:

    $vertical: 'max-height' 50em;
    
    .item {
      @include breakpoint($vertical) {
        font-size: 2em;
      }
    }
    

    You can also include height queries with other queries as follows:

    $mixed: 15em ('max-height' 50em);
    
    .item {
      @include breakpoint($mixed) {
         font-size: 2em;
      }
    }