jade 基本语法 (jade basic)

refer to:  http://jade-lang.com/reference/

急速入门：

<Alloy>
  <Window>
    <ScrollableView id="scrollableView" showPagingControl="true" width="100%">
      <View id="view1" backgroundColor="#123">
        <ImageView image="/images/index/guide01.png" width="100%" height="100%" left="%0" top="%0"></ImageView>
      </View>
      <View id="view2" backgroundColor="#246">
        <ImageView image="/images/index/guide02.png" width="100%" height="100%" left="%0" top="%0"></ImageView>
      </View>
      <View id="view3" backgroundColor="#48b">
        <ImageView image="/images/index/guide03.png" width="100%" height="100%" left="%0" top="%0"></ImageView>
      </View>
      <View id="view4">
        <ImageView image="/images/index/guide04.png" width="100%" height="100%" left="%0" top="%0"></ImageView>
        <Button id="go" onClick="go_login">立即体验</Button>
      </View>
      </ScrollableView>
  </Window>
</Alloy>

转换成 jade: 

Alloy
    Window
        ScrollableView#scrollableView( showPagingControl="true" width="100%")
            View#view1(backgroundColor="#123")
                ImageView(image="/images/index/guide01.png" width="100%" height="100%" left="%0" top="%0")
            View#view2(backgroundColor="#246")
                ImageView(image="/images/index/guide02.png" width="100%" height="100%" left="%0" top="%0")
            View#view3(backgroundColor="#48b")
                ImageView(image="/images/index/guide03.png" width="100%" height="100%" left="%0" top="%0")
            View#view4
                ImageView(image="/images/index/guide04.png" width="100%" height="100%" left="%0" top="%0")
                Button#go(onClick="go_login") 立即体验

注释：

// 注释 ，  或者 //- 注释

使用mixin:

mixin say_hi(name, content)
    div#my_id.class_id "#{content}, #{name} , ohyeah~"
    div#my_id.class_id= name

+say_hi("dashi", '你好')

生成：
<div id="my_id" class="class_id">"你好, dashi , ohyeah~"</div>
<div id="my_id" class="class_id">dashi</div>