josephj · June 10, 2013 01:15
diff --git a/_base.sass b/_base.sass
 @import susy

 $total-columns: 49
 $column-width: 20px
 $gutter-width: 0px
 $grid-padding: 0px
diff --git a/demo.html b/demo.html
 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>Susy Layout</title>
 <link rel="stylesheet" href="stylesheets/layout.css">
 </head>
 <body>
  <div class="grid">
    <div id="hd">
      <header>
        <h1>頁首</h1>
      </header>
    </div>
    <div id="bd">
      <nav class="grid-nav">主選單</nav>
      <div class="grid-main">
        <div class="grid-content">主要內容</div>
        <aside class="grid-aside">側邊欄</aside>
      </div>
    </div>
    <div id="ft">
        <footer>頁尾</footer>
    </div>
  </div>
 </body>
 </html>
diff --git a/layout.sass b/layout.sass
 @import base
 @import compass/reset

 // Layout Setting
 .grid
  +container
  #hd, #bd, #ft
    +clearfix
  .grid-nav
    +span-columns(8)
  .grid-main
    +span-columns(41 omega)
    .grid-content
      +span-columns(36)
    .grid-aside
      +span-columns(13 omega)
            
 // Just for decoration
 .grid-nav
  background: red
 .grid-main
  background: gray
  .grid-aside
    background: pink
  .grid-content
    background: yellow
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Susy Layout</title>
	<link rel="stylesheet" href="stylesheets/layout.css">
	</head>
	<body>
	<div class="grid">
	<div id="hd">
	<header>
	<h1>頁首</h1>
	</header>
	</div>
	<div id="bd">
	<nav class="grid-nav">主選單</nav>
	<div class="grid-main">
	<div class="grid-content">主要內容</div>
	<aside class="grid-aside">側邊欄</aside>
	</div>
	</div>
	<div id="ft">
	<footer>頁尾</footer>
	</div>
	</div>
	</body>
	</html>