如何在手写笔中使用多个可变断点进行媒体查询?

也许不是最好的解决方案,但你可以考虑使用 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;
    }
}

更新

这是另一个 恶作剧的

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

您将不得不丢失括号,因为stylus将媒体查询强制放入括号中以进行内联连接(手写笔不再处于活动开发中,因此这可能不会得到解决),这样就可以内联工作了,或者您可以只将常规连接到一个新变量中,然后使用它。 Here is a playground

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

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

join() 函数预先生成所需的文本:

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

然后使用它:

@media $media
    display: none;