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

Question

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!

Answer 1

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