Client-Side Jade Test

by Danny Michaelis

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jade/0.27.7/jade.min.js"></script>
<div id="so">SEO(please enable javascript~)</div>
<pre id="jadehi" style="display:none">
.con
  .pex
    h1= title
  .cot
    h1 List
    ul.list
      - for(var i in tmp=[1,2,8,"yooo~",9])
        li= "Item - "+tmp[i]
  .fot
    .line
    p= foot
</pre>

SCSS

.pex {
background: #6292A8;
padding: 12px;
margin: 8px;
border: 3px solid #DDD;
box-shadow: 0 0 8px;
text-align: center;
font: 300 12pt\/16pt serif;
}
.cot {
padding: 12px;
margin: 8px;
box-shadow: 0 0 8px,rgba(0, 0, 0, 0.1) 0 0 99px inset;
}
.list {
border: 1px solid #CFC;
padding: 8px;
line-height: 150%;
    li {
    background: #F0F0F0;
    box-shadow: 0 8px 16px -16px inset;
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 0 8px;
    font-size: 9pt;
    }
}
.fot {
background: #E4D480;
padding: 12px;
margin: 8px;
border: 3px solid #DDD;
box-shadow: 0 0 8px;
text-align: center;
font: 300 12pt\/16pt serif;
}

JavaScript

$(function() {
    var djson = {
        title: "Jade Test Page",
        foot: "I'm a foot."
    };
    document.title = djson.title;
    //jade compile
    $("#so").html(jade.compile($("#jadehi").html())(djson));
});