如何在Stylus中使用多个变量断点进行媒体查询？

Question

现在的情况

我有以下Stylus代码

$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导致Stylus输出@media $tablet, $mobile
• @media '{$tablet}, {$mobile}导致语法错误。
• @media join(',', $tablet, $mobile)导致语法错误。

What I can do but don't want to do

• 我可以设置一个新的断点$mobileAndTablet，这会破坏目的（我不想做所有的组合）。
• 我可以在display: none断点上使display: block总是和$desktop，再次，这不是我在这里寻找的（在这个例子中我有3个断点，在其他我可能有更多）。

TL; DR

如何在Stylus中为多个断点使用多个变量？

Sass与@media #{$mobile}, #{$tablet}有这个功能。我正在为Stylus寻找类似的东西。

Answer 1

可能不是最好的解决方案，但您可以考虑使用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;
    }
}

手写笔代码在某种程度上是您想要的，但输出不是单个媒体查询。

UPDATE

这是避免媒体查询重复的另一种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;
    }
}

Answer 2

你将不得不丢失括号，因为手写笔强制媒体查询进入括号内联串（手写笔不再处于活动开发状态，所以这可能无法解决），因为它可以内联工作，或者你可以定期连接成新的变量然后使用它。 Here is a playground

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

@media ({$mobile}) , ({$laptop})
  body
    color: green;

Answer 3

您可以使用join()函数预先生成所需的文字：

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

然后使用它：

@media $media
    display: none;