Stylus ParseError: Generating Font Icons

Question

I'm trying to use Stylus to generate font icons in Icomoon, to also generate variables, but I'm getting a parseError:

ParseError: icons.styl:930 926| for icon, i in $icons 927| .icon-{icon} 928| &:before 929| content ${icon}

unexpected "eos"

I am to generate :before and after content values for corresponding classes. My loop is as follows:

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

I first assign each icon to its content value like so:

$icon-chrome = "\e829"

$icon-firefox = "\e82a"

$icon-IE = "\e82b"

$icon-opera = "\e82c"

$icon-safari = "\e82d"

$icon-IcoMoon = "\e82e"

Where $icons is equal to:

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

How can I fix this parseError to correctly generate my font icons?

Answer 1

You can't use an interpolation to dynamically generate a variable name. For this purpose we have the lookup built-in function. For example:

$icons = home2, home3

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

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

But hashes are much better for this task.