Question

我试图解析Stylus中的列表（最新版本），但它的结果很奇怪。

$small  = 200px
$medium = 400px
$large  = 600px

$list = small  $small,
        medium $medium,
        large  $large

for ham in $list
  @media screen and (min-width: ham[1])
    .{ham[0]}
      width ham[1]

产量

@media screen and (min-width: ham[1]) {
  .small {
    width: 200px;
  }
}
@media screen and (min-width: ham[1]) {
  .medium {
    width: 400px;
  }
}
@media screen and (min-width: ham[1]) {
  .large {
    width: 600px;
  }
}

ham[1]变量在媒体查询中无法解析，无论我是否将其包装在{}中，但它在其他地方解析得很好。我在这里缺少什么？

Answer 1

目前，媒体查询不允许插值。但是，您可以使用一个变量。现在就预先构建查询：

$small  = 200px
$medium = 400px
$large  = 600px

$list = small  $small,
        medium $medium,
        large  $large

for ham in $list
  query = 'screen and (min-width: %s)' % ham[1]
  @media query
    .{ham[0]}
      width ham[1]

更新：使用Stylus 0.44（或0.45），它们现在就可以了！

Stylus不以相同的方式解析所有变量

1 个答案: