如何在触控笔中使用多个可变断点进行媒体查询？

Question

现状

我有以下手写笔代码

$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断点，而这又不是我想要的（在此示例中，我有3个断点，在其他情况下，可能还有更多）。

TL; DR

如何在触控笔中为多个断点使用多个变量？

Sass的$desktop具有此功能。我正在为手写笔寻找类似的东西。

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

手写笔代码是您想要的，但是输出不会是单个媒体查询。

更新

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