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!

score 1 · Accepted Answer · answered May 08 '13 at 21:16

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

answered May 08 '13 at 21:16

Snugug

1

To expand on Snug's answer, you can use any media query feature and value pair as a breakpoint value. `min-width 15em`, `max-height 10vh`, `orientation portrait`, `color 8`: any media query feature value pair can be a breakpoint pair. – RobW May 09 '13 at 00:52
Thanks, Snugug & RobW! My syntax ended up looking like this: `@include breakpoint('max-height' 50em) {styles:here}` – ctrlaltdel May 09 '13 at 13:45

1 Answers1