Предпочтительный способ написания вертикальных медиа-запросов с помощью расширения точки останова Sass

Существует ли предпочтительный способ написания вертикальных медиа-запросов с помощью точки останова расширения Sass, которые имеют только один аргумент для значения запроса?

Вот пример того, чего я хотел бы в конечном итоге достичь:

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

Или я должен просто сделать простой медиа-запрос "на лету" для этих стилей, например:

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

Можно ли с этим справиться с помощью переменной?

Мои стили - «сначала мобильные», поэтому все другие медиа-запросы на этом сайте используют настройку «min-width» по умолчанию для точки останова.

Спасибо!


sass compass-sass breakpoint-sass
person ctrlaltdel    schedule 08.05.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете сделать следующее:

$vertical: 'max-height' 50em;

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

Вы также можете включать запросы высоты с другими запросами следующим образом:

$mixed: 15em ('max-height' 50em);

.item {
  @include breakpoint($mixed) {
     font-size: 2em;
  }
}
person Snugug    schedule 08.05.2013
comment
Чтобы расширить ответ Snug, вы можете использовать любую функцию медиа-запроса и пару значений в качестве значения точки останова. min-width 15em, max-height 10vh, orientation portrait, color 8: любая пара значений функции медиа-запроса может быть парой точек останова. - person RobW; 09.05.2013
comment
Спасибо, Snugug и RobW! В итоге мой синтаксис выглядел так: @include breakpoint('max-height' 50em) {styles:here} - person ctrlaltdel; 09.05.2013