jade inside jade variable

I am slowly learning nodejs, express, and jade. Here is what I am trying to accomplish essentially: 

          ul.nav

        - var obj = { 'home':'i.icon-home.icon-white Home', 'about':'About' }
          - each val, key in obj
            - if (id == key)
              li.active
                a(href='#{key}') #{val}
            - else
              li
                a(href='#{key}') #{val}

Basically, I am trying to print a nav list but for the "Home" li I want to be able to show a little icon before it. But instead of compiling the jade in the variable to HTML it prints it out plain text (along with if I wrap it with the html I am trying to use. These conditions are essential to my program so any help would be very beneficial, thank you very much!!!

I would switch up your jade a bit.

use a for on the obj like this:

-  for(var key in obj){
    a(href='#'+key)= obj[key]
-  }

If your line starts with a - you writing JavaScript. Otherwise it's jade.
Jade has its own condition and flow control constructs and keywords (each, if and else), so don't prefix them with a -

ul.nav
each val, key in obj
  if (id == key)
    li.active
      a(href='#{key}') #{val}
  else
    li
      a(href='#{key}') #{val}