如何在 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手写笔输出的结果@media $tablet, $mobile
@media '{$tablet}, {$mobile}导致语法错误。
@media join(',', $tablet, $mobile)导致语法错误。

我能做什么但不想做什么

我可以设置一个违背目的的新断点（我不想进行所有组合）。$mobileAndTablet
我可以始终在断点上使用它，同样，这不是我在这里寻找的（在这个例子中，我有 3 个断点，在其他情况下我可能有更多）。display: nonedisplay: block$desktop

TL;博士

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

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

CSS 手写笔

评论

0赞 Asons 3/12/2019

这有用吗 1pixelout.net/2015/10/02/...

0赞 Madara's Ghost 3/12/2019

我希望一些东西不会让我需要导入使用媒体查询的项目中的每个文件。但如果这是唯一的方法，那就行了。仍在寻找更好的方法，谢谢:)

答：

0赞 haim770 3/12/2019 #1

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

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

然后使用它：

@media $media
    display: none;

评论

0赞 Madara's Ghost 3/12/2019

谢谢你的回答！这类似于我说要避免的解决方案，如果我有 5 个断点，设置所有可能的组合会很痛苦。$mobileAndTable

1赞 Temani Afif 3/12/2019 #2

可能不是最好的解决方案，但您可以考虑通过编写如下代码来实现此目的：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;
    }
}

1赞 Liron Navon 3/12/2019 #3

您将不得不丢失括号，因为手写笔会强制媒体查询进入括号以进行内联连接（手写笔不再处于积极开发中，因此可能无法解决）才能将其内联工作，或者您可以定期连接到一个新变量中，然后使用它。这里是游乐场

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

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

评论

0赞 Temani Afif 3/12/2019

知道如何处理查询由两个或多个条件形成的情况，如他的示例所示？

上一个：如何将生成项目从 GitLab CI 部署到 Azure 应用服务？

下一个：如何从WP_Post对象获取缩略图？