代码之家 › 专栏 › 技术社区 › Madara's Ghost

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

stylus css

Madara's Ghost · 技术社区 · 6 年前

现状

我有下面的代码

$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 join(',', $tablet, $mobile) 导致语法错误。

我能做但不想做的事

我可以设置一个新的断点 $mobileAndTablet 这违背了目的(我不想做所有的组合)。
我能行的 display: none 总是和 display: block 在 $desktop 断点,同样,这不是我在这里要找的(在这个例子中我有3个断点,在其他例子中我可能有更多)。

如何在手写笔中为多个断点使用多个变量?

Sass具有此功能 @media #{$mobile}, #{$tablet} . 我在找类似的唱针。

0 回复 | 直到 6 年前

Temani Afif 6 年前

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

Liron Navon 6 年前

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

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

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

haim770 6 年前

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

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

然后使用它:

@media $media
    display: none;