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