Как вы можете использовать несколько переменных точек останова для медиа-запросов в стилусе? - PullRequest
Новая
       14

Как вы можете использовать несколько переменных точек останова для медиа-запросов в стилусе?

2 голосов
/ 12 марта 2019

Текущая ситуация

У меня есть следующий код стилуса 

$mobile = '(max-width 767px)';
$tablet = '(min-width 768px) and (max-width: 1365px)';
$desktop = '(min-width: 1366px)';

  .sidebar
    width 300px;

    @media $tablet
      display none;

Этот код работает хорошо - боковая панель исчезает для указанных размеров экрана.

Проблема

Теперь я бы хотел, чтобы он также исчез для точки останова $mobile.

В идеале, я бы хотел что-то вроде этого: 

$mobile = '(max-width 767px)';
$tablet = '(min-width 768px) and (max-width: 1365px)';
$desktop = '(min-width: 1366px)';

  .sidebar
    width 300px;

    @media $tablet, $mobile
      display none;

И это будет выводить (или что-то с эффектом) 

.sidebar { width: 300px; }
@media (min-width: 768px) and (max-width: 1365px), (max-width: 767px) {
  .sidebar { display: none; }

Что я пробовал

  • @media $tablet, $mobile приводит к выводу стилуса @media $tablet, $mobile
  • @media '{$tablet}, {$mobile} приводит к синтаксической ошибке.
  • @media join(',', $tablet, $mobile) приводит к синтаксической ошибке.

Что я могу сделать, но не хочу

  • Я могу установить новую точку останова $mobileAndTablet, которая побеждает цель (я не хочу делать все комбинации).
  • Я могу сделать это display: none всегда и display: block на $desktop контрольных точках, опять же, это не то, что я ищу здесь (в этом примере у меня есть 3 контрольных точки, в других у меня может быть больше).

TL; DR

Как я могу использовать несколько переменных для нескольких точек останова в стилусе?

У Sass есть эта функция с @media #{$mobile}, #{$tablet}. Я ищу что-то подобное для Stylus.

Ответы [ 3 ]

1 голос
/ 12 марта 2019

Возможно, не лучшее решение, но вы можете рассмотреть возможность использования for для достижения этой цели, написав код, подобный приведенному ниже: 

$mobile = '(max-width 767px)';
$tablet = '(min-width 768px) and (max-width: 1365px)';
$desktop ='(min-width: 1366px)'; 

  .sidebar
    width 300px;

    for m in $mobile $tablet
      @media m
        display none;

И у вас будет такой вывод: 

.sidebar {
    width: 300px;
}

@media (max-width: 767px) {
    .sidebar {
        display: none;
    }
}

@media (min-width: 768px) and (max-width: 1365px) {
    .sidebar {
        display: none;
    }
}

Код стилуса как-то похож на ваш, но на выходе не будет одного медиазапроса.

ОБНОВЛЕНИЕ

Вот еще один hacky способ избежать дублирования медиазапроса, но вам придется продублировать селектор: 

$mobile = '(max-width: 767px)';
$tablet = '(min-width: 768px) and (max-width: 1365px)';
$desktop ='(min-width: 1366px)';

  .sidebar
    width 300px;

  unquote("@media " + join(',',$mobile $tablet) + "{")
  .sidebar
    display none;   
  unquote("}")

Выше приведено следующее: 

.sidebar {
    width: 300px;
}

@media (max-width: 767px),(min-width: 768px) and (max-width: 1365px) {
    .sidebar {
        display: none;
    }
}
1 голос
/ 12 марта 2019

вам придется потерять круглые скобки, так как стилус принудительно вставляет медиа-запросы в круглые скобки для встроенной конкатенации (стилус больше не находится в активной разработке, так что это, вероятно, не будет решено), чтобы это работало в строке, или вы можете просто сделать обычную конкатенациюв новую переменную, а затем использовать это. Вот детская площадка 

$mobile = 'max-width: 767px'
$laptop = 'min-width: 1366px'

@media ({$mobile}) , ({$laptop})
  body
    color: green;
0 голосов
/ 12 марта 2019

Вы можете использовать функцию join() для предварительного генерирования необходимого литерала: 

$media = join(',', $tablet $mobile);

Тогда используйте это: 

@media $media
    display: none;
...