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)，并使用10px gutter生成三列网格。该网格是响应式的，少于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)

根据您的评论进行编辑：

如果你提到过你可以使用这样的mixin：

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

我找到了解决方案。它不适用于我用于媒体查询的块混合，但使用普通语法的媒体查询工作正常。只需要使用`Vagrantfile` already exists in this directory. Remove it before running `vagrant init`.函数，如果为空则继续，如果不是则跳过de block。这很简单：）。

手写笔代码：

current-media()

CSS输出：

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)

如何跳过Stylus功能中的媒体查询？

2 个答案: