使用 Stylus 遍历列表

Question

我决定从 SCSS => Stylus 切换预编译器。我已经查看了 Stylus 的文档，但遇到了障碍。

手写笔列表：

breakpoints = xs 176px, 
              s 480px, 
              m 768px

这个列表是这样拉出来的：

respond-to()
    if arguments in breakpoints
        @media (min-width: arguments)
            {block}
    else 
        error('Invalid breakpoint.')

像这样的引用

respond-to(xs) 
    col()

但这没有任何输出。

我不想遍历每个数组项并输出它们，我只想将用户定义的键名称与数组中的键名称进行匹配，如果它存在于数组中，则将其单个值输出到一条语句，否则报错，如上所示。

代码合乎逻辑，有什么想法吗？

编辑 #1：尝试将列表转换为散列并使用相同的 pull 语句，没有成功

哈希：

breakpoints = { 'xs': 176px, 's': 480px, 'm ': 768px }

拉：

respond-to()
    if arguments in breakpoints
        @media (min-width: breakpoints[arguments])
        {block}
    else 
        error('Invalid breakpoint.')

编辑 #2：找到了与我正在尝试做的类似的东西，只是不想要那么多代码。 CTRL F // 定义缓存和别名 here.

编辑 #3：找到一个具有相同用法的 NPM Library

Answer 1

arguments 是传递参数的列表，因此您应该使用 [0] 获取第一个参数。或者你可以只命名参数。例如：

breakpoints = { 'xs': 176px, 's': 480px, 'm ': 768px }

respond-to() // or respond-to(bp) and delete the second line
  bp = arguments[0]
  if bp in breakpoints
    @media (min-width: breakpoints[bp])
      {block}
  else 
    error('Invalid breakpoint.')

+respond-to('xs') // the + sign is important because it's a block mixin call
  body
    color red

使用 Stylus 遍历列表

Iterating over a list with Stylus

stylus