Question

我决定从SCSS =＆gt;切换预编译器。手写笔。我已经查看过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：尝试将列表转换为哈希并使用相同的拉语句，没有运气

哈希：

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迭代列表

1 个答案: