如何跳过 Stylus 函数中的媒体查询？

Question

我在 Stylus 中有这样一个功能：

fn($margin, $padding)
  width 100%
  margin $margin
  padding $padding
  @media (min-width: 500px)
    width 50%
    float left

在我想使用第二个媒体查询更改函数值之前，它运行良好：

div
  fn(3px, 5px)
  @media (min-width: 700px)
    fn(6px, 25px)

我明白了 css:

div {
  width: 100%;
  margin: 3px;
  padding: 5px;
}
@media (min-width: 500px) {
  div {
    width: 50%;
    float: left;
  }
}
@media (min-width: 700px) {
  div {
    width: 100%;
    margin: 6px;
    padding: 25px;
  }
}
@media (min-width: 700px) and (min-width: 500px) {
  div {
    width: 50%;
    float: left;
  }
}

显然这不是我想要的，因为函数的媒体查询覆盖了新媒体查询的一些属性。

当我从媒体查询调用函数时，是否有任何方法可以跳过函数的那部分？

编辑（展开解释）：

例如，用户写入：grid (3, 10px) 并生成具有 10 像素装订线的三列网格。该网格是响应式的，小于 500px 只有一列。同时用户可能想制作自己的断点，例如：

div
   grid(3, 10px)
   @media (min-width: 700px)
     grid(4, 20px)

我想要的是让媒体查询默认保持500px而不需要用户定义它，所以我把它放在了函数中。

Answer 1

你可以这样使用它：

fn($width, $margin, $padding)
  width $width
  margin $margin
  padding $padding
  float: left

@media (min-width: 500px)
  div 
    fn(50%, 3px, 5px)

@media (min-width: 700px)
  div 
    fn(100%, 6px, 25px)

这将导致以下 css:

@media (min-width: 500px) {
  div {
    width: 50%;
    margin: 3px;
    padding: 5px;
    float: left;
  }
}
@media (min-width: 700px) {
  div {
    width: 100%;
    margin: 6px;
    padding: 25px;
    float: left;
  }
}

更清晰的方法是首先定义公共属性，然后像这样使用媒体查询：

fn($width, $margin, $padding)
  width $width
  margin $margin
  padding $padding

div 
  float: left

@media (min-width: 500px)
  div 
    fn(50%, 3px, 5px)

@media (min-width: 700px)
  div 
    fn(100%, 6px, 25px)

根据您的评论进行编辑：

在您提到的情况下，您可以使用这样的混合：

media_queries = {
  small  : "(min-width: 500px)",
  medium  : "(min-width: 700px)"
}

for_breakpoint(breakpoints)
  conditions = ()
  for breakpoint in breakpoints
    push(conditions, media_queries[breakpoint])
  conditions = join(", ", conditions)
  @media conditions
    {block}

fn($width, $margin, $padding)
  width $width
  margin $margin
  padding $padding

div
  float left
  +for_breakpoint(small)
    fn(50%, 3px, 5px)
  +for_breakpoint(medium)
    fn(100%, 6px, 25px)

结果将是：

div {
  float: left;
}
@media (min-width: 500px) {
  div {
    width: 50%;
    margin: 3px;
    padding: 5px;
  }
}
@media (min-width: 700px) {
  div {
    width: 100%;
    margin: 6px;
    padding: 25px;
  }
}

显然，您可以根据需要添加任意数量的断点，甚至不能在断点中包含更多语句，例如 small : "only screen and (min-width: 500px) and (max-width: 700px)",。

查看实际效果：Stylus online editor

Answer 2

我找到了解决办法。它不适用于我用于媒体查询的块混合，但使用正常语法的媒体查询可以正常工作。只需要使用 current-media() 函数，如果为空则继续，如果不为空则跳过 de block。很简单:).

触控笔代码：

fn($margin, $padding)
  width 100%
  margin $margin
  padding $padding
  if current-media() is ''
    @media (min-width: 500px)
      width 50%
      float left

div
  fn(3px, 5px)
  @media (min-width: 700px)
    fn(6px, 25px)

CSS 输出：

div {
  width: 100%;
  margin: 3px;
  padding: 5px;
}
@media (min-width: 500px) {
  div {
    width: 50%;
    float: left;
  }
}
@media (min-width: 700px) {
  div {
    width: 100%;
    margin: 6px;
    padding: 25px;
  }
}

如何跳过 Stylus 函数中的媒体查询？

How can I skip the media-query in a Stylus function?

css

media-queries

stylus