jade makes me say FOOOOO

foo.jade.html

<!-- jade is an html templating language -->


<!-- say you have this html -->

<div class="my-btn-group">
  <div class="btn-group">
    <div class="button.btn dropdown-toggle">
      <i class="icon-save">Save</i>
    </div>
    <div class="dropdown-menu save"></div>
  </div>
</div>


<!-- jade is pretty cool. you can rewrite it like this: -->

.my-btn-group
  .btn-group
    button.btn.dropdown-toggle
      i.icon-save
      | Save
    .dropdown-menu.save


<!-- and it gets better. you can mix regular html into jade code: -->

.my-btn-group
  .btn-group
    button.btn.dropdown-toggle
      <i class="icon-save">Save</i>
    .dropdown-menu.save


<!-- and then jade proves to be mindfuckingly retarded -->

<!-- this code is valid: -->

<div class="my-btn-group">
.btn-group
  button.btn.dropdown-toggle
    i.icon-save
    | Save
  .dropdown-menu.save
</div>

<!-- and this code is not: -->

<div class="my-btn-group">
  .btn-group
    button.btn.dropdown-toggle
      i.icon-save
      | Save
    .dropdown-menu.save
</div>


<!-- jade is pretty cool. it lets you evaluate and interpolate javascript, using
    passed in variables -->

img.picture(src='#{user.profileImage.url}')


<!-- it has a ternary operator, and you can simultaneously add classes to a tag
    with the `.className` syntax and the `(class='className')` syntax -->
img.picture(class='#{showPic ? "show" : "hide"}' src='#{user.profileImage.url}')


<!-- if you want to break long lines, however, you can't. you just can't. -->

<!-- this code is valid: -->
img.picture(class='#{user.profileImage.dims.y > 300 ? "wide" : "normal"}' src='#{user.profileImage.url}')

<!-- and this code is not: -->
img.picture(class='#{user.profileImage.dims.y > 300 ? "wide" : "normal"}'
    src='#{user.profileImage.url}')

<!-- and this code is not: -->
img.picture(class='#{user.profileImage.dims.y > 300 ? "wide" : "normal"}' src='
    #{user.profileImage.url}')

<!-- and this code is not: -->
img.picture(class='#{user.profileImage.dims.y > 300 ?
    "wide" : "normal"}' src='#{user.profileImage.url}')