pug - Why Jade complains an interpolation variable is undefined? -

when compile below code snippt, jade complains user_name , user_level undefined:

div.outer      div.info          div.user_name  #{user_name}          div.user_level span.level "lv."+#{user_level} 

why?

im passing next vars: {"user_name": "bob","user_level": "admin" } no errors here

these:

div.outer     div.info         div.user_name  #{user_name}         div.user_level span.level "lv."+#{user_level} 

compiles these:

<div class="outer">     <div class="info">         <div class="user_name"> bob</div>         <div class="user_level">span.level "lv."+admin</div>     </div> </div> 

then here problem tho: <div class="user_level">span.level "lv."+admin</div>

my test runs when:

div.outer      div.info          div.user_name  #{user_name}          div.user_level              span.level lv.#{user_level}  <----here want dot? 

compiles into:

<div class="outer">     <div class="info">         <div class="user_name">bob</div>         <div class="user_level"><span class="level">lv.admin</span></div>  <---looks better.     </div> </div> 

hope helps

part 2: for & each example.

passing {"books": ["a", "b", "c"]}

select   each book, in books     option(value=i) book #{book} 

compiles into:

<select>   <option value="0">book a</option>   <option value="1">book b</option>   <option value="2">book c</option> </select> 

and

ul   book in books     li= book   else     li sorry, no books! 

compiles into:

<ul>   <li>a</li>   <li>b</li>   <li>c</li> </ul> 

case pass :{"books": []}

compiles into:

<ul>     <li>sorry, no books!</li> </ul>