Stylus ParseError：生成字体图标答案

【问题标题】：Stylus ParseError: Generating Font IconsStylus ParseError：生成字体图标
【发布时间】：2014-08-19 09:29:58
【问题描述】：

我正在尝试使用 Stylus 在Icomoon 中生成字体图标，也可以生成变量，但我得到了parseError：

解析错误：icons.styl:930 926|对于图标，我在 $icons 927| .icon-{icon} 928| &:929 之前|内容 ${icon}

意外的“eos”

我要为相应的类生成:before 和content 之后的值。我的循环如下：

for icon, i in $icons
    .icon-{icon}
        &:before
            content ${$icon}

我首先将每个图标分配给它的content 值，如下所示：

$icon-chrome = "\e829"

$icon-firefox = "\e82a"

$icon-IE = "\e82b"

$icon-opera = "\e82c"

$icon-safari = "\e82d"

$icon-IcoMoon = "\e82e"

其中$icons 等于：

$icons = home2, home3, home4, office, newspaper, pencil2

如何修复这个parseError 以正确生成我的字体图标？

【问题讨论】：

标签： icons webfonts stylus

【解决方案1】：

您不能使用插值来动态生成变量名。为此，我们有 lookup 内置函数。例如：

$icons = home2, home3

$icon-home2 = '\e829'
$icon-home3 = '\e82a'

for icon, i in $icons
  .icon-{icon}
    &:before
      content lookup('$icon-' + icon)

但是hashes 更适合这项任务。

【讨论】：