Mike's Jade Cheatsheet

• shorthand syntax
  • use CMD-/ to write jade comment indicator //-
  • use colon as alt method to indicate nesting (e.g. table: tr: td)
  
  
• setting attributes
  • split attributes to multi-line and lose the commas
  • use [brackets] to list multiple classnames in attr list class=["class1", "class2"]
  • use JSON to declare attributes as follows:

    a()&attributes({
    	'id':    'lander',
    	'class': 'lowclass'
    })

• including content
  • use keyword include as in include filename_without_ext
  • keyword extends as in extends template_file
  • keyword block blockname and then replace block in target doc
    blocks can be re-used multiple times in page, use to define content blocks like vars
  • block append blockname to append onto inherited block content
  • block prepend blockname to prepend to inherited block content
  • note: append and prepend are useful in titles, meta tags, groups of stylesheet link, etc
  • note also that "block" keyword not neccessary when invoking block content
  
  
• config files
  • line starting with hyphen - is treated as a variable
  • variables included within strings and interpolated, use ruby syntax # { var-to-be-interpolated }
  • variables included outside strings just like javascript, used normally
  • conditional loading via variables - good for google fonts, which vary per page
    link( href="//fonts.googleapis.com/css?family=" + GoogleFonts     rel="stylesheet" )
  
  
• language filters
  • they allow you to use coffeescript, less, markdown, etc ... inside your jade files

  • script
    	:coffee
    		console.log "coffee script goes here" if truthy_var_or_expression

  • (be sure to note the colon before language name)
  • example 2 - stylus:

  • style
    	:stylus
    		.stylebox
    			color #fff
    			padding 1em

  
  
• inline HTML
  • put HTML tags inline whenever, for example:
  • | <script src="http://somesrc.com/scripty.js">
  
  
• including other external code source
  • use include:codename i.e.
    include:markdown external_markdown_file.md
  • codename not needed for external HTML file
    include external_html_file.html
  
  
• using javascript processing
  • use arrays and JS methods
  • javascript methods like push, concat, Math.floor
  
  
• mixins

  • mixin navmenu()
    	// mixin code to be reused goes here

    
    +navmenu() // to use this mixin
    
  • iterators - for, each can be used including arrays of object literals like - var ary = [{"a": "1"}, {"b": "2"}]
  • these are referenced by ary.a (has value of 1)