Convert examples to scss.

examples/blueprint_default/src/ie.sass

@@ -1,3 +0,0 @@
-@import blueprint.sass
-
-+blueprint-ie

examples/blueprint_default/src/ie.scss

@@ -0,0 +1,3 @@
+@import "blueprint";
+
+@include blueprint-ie;

examples/blueprint_default/src/print.sass

@@ -1,3 +0,0 @@
-@import blueprint.sass
-
-+blueprint-print

examples/blueprint_default/src/print.scss

@@ -0,0 +1,3 @@
+@import "blueprint";
+
+@include blueprint-print;

examples/blueprint_default/src/screen.scss

@@ -1,8 +1,9 @@
-@import blueprint.sass
+@import "blueprint";
-@import blueprint/scaffolding.sass
+@import "blueprint/scaffolding";
-@import compass/reset.sass
+@import "compass/reset";
+
+@include blueprint;
 
-+blueprint
 // Remove the scaffolding when you're ready to start doing visual design.
 // Or leave it in if you're happy with how blueprint looks out-of-the-box
-+blueprint-scaffolding
+@include blueprint-scaffolding;

examples/blueprint_plugins/src/buttons.sass

@@ -1,49 +0,0 @@
-@import compass/utilities/general/float.sass
-@import blueprint/buttons.sass
-
-//
-  Use the following HTML code to place the buttons on your site:
-  
-  <button type="submit" class="button positive">
-    <img src="css/blueprint/plugins/buttons/icons/tick.png" alt=""/> Save
-  </button>
-  
-  <a class="button" href="/password/reset/">
-    <img src="css/blueprint/plugins/buttons/icons/key.png" alt=""/> Change Password
-  </a>
-  
-  <a href="#" class="button negative">
-    <img src="css/blueprint/plugins/buttons/icons/cross.png" alt=""/> Cancel
-  </a>
-
-a.button
-  // you can pass "left" or "right" to +anchor-button to float it in that direction
-  // or you can pass no argument to leave it inline-block (cross browser safe!) within
-  // the flow of your page.
-  +anchor-button("left")
-  // All the button color mixins take 4 optional arguments:
-  // font color, background color, border color, border highlight color
-  // the first three default to constants set in blueprint/buttons.sass
-  // the last one defaults to a shade lighter than the border color.
-  +button-colors
-  +button-hover-colors
-  +button-active-colors
-
-button
-  // The +button-button mixin is just like the +anchor-button mixin, but for <button> elements.
-  +button-button("left")
-  +button-colors
-  +button-hover-colors
-  +button-active-colors
-
-// We can change the colors for buttons of certain classes, etc.
-a.positive, button.positive
-  :color #529214
-  +button-hover-colors(#529214, #E6EFC2, #C6D880)
-  +button-active-colors(#FFF, #529214, #529214)
-
-a.negative, button.negative
-  :color #D12F19
-  +button-hover-colors(#D12F19, #FBE3E4, #FBC2C4)
-  +button-active-colors(#FFF, #D12F19, #D12F19)
-

examples/blueprint_plugins/src/buttons.scss

@@ -0,0 +1,47 @@
+@import "compass/utilities/general/float";
+@import "blueprint/buttons";
+
+// Use the following HTML code to place the buttons on your site:
+//
+// <button type="submit" class="button positive">
+//   <img src="css/blueprint/plugins/buttons/icons/tick.png" alt=""/> Save
+// </button>
+//
+// <a class="button" href="/password/reset/">
+//   <img src="css/blueprint/plugins/buttons/icons/key.png" alt=""/> Change Password
+// </a>
+//
+// <a href="#" class="button negative">
+//   <img src="css/blueprint/plugins/buttons/icons/cross.png" alt=""/> Cancel
+// </a>
+
+a.button {
+  // you can pass "left" or "right" to +anchor-button to float it in that direction
+  // or you can pass no argument to leave it inline-block (cross browser safe!) within
+  // the flow of your page.
+  @include anchor-button(left);
+  // All the button color mixins take 4 optional arguments:
+  // font color, background color, border color, border highlight color
+  // the first three default to constants set in blueprint/buttons
+  // the last one defaults to a shade lighter than the border color.
+  @include button-colors;
+  @include button-hover-colors;
+  @include button-active-colors; }
+
+button {
+  // The +button-button mixin is just like the +anchor-button mixin, but for <button> elements.
+  @include button-button(left);
+  @include button-colors;
+  @include button-hover-colors;
+  @include button-active-colors; }
+
+// We can change the colors for buttons of certain classes, etc.
+a.positive, button.positive {
+  color: #529214;
+  @include button-hover-colors(#529214, #e6efc2, #c6d880);
+  @include button-active-colors(white, #529214, #529214); }
+
+a.negative, button.negative {
+  color: #d12f19;
+  @include button-hover-colors(#d12f19, #fbe3e4, #fbc2c4);
+  @include button-active-colors(white, #d12f19, #d12f19); }

examples/blueprint_plugins/src/ie.sass

@@ -1,3 +0,0 @@
-@import blueprint.sass
-
-+blueprint-ie

examples/blueprint_plugins/src/ie.scss

@@ -0,0 +1,3 @@
+@import "blueprint";
+
+@include blueprint-ie;

examples/blueprint_plugins/src/link_icons.scss

@@ -1,13 +1,13 @@
-@import blueprint/link_icons.sass
+@import "blueprint/link-icons";
 
 // This turns link icons on for all links. You can change the scoping selector from
 // body to something more specific if you prefer.
-body
+body {
-  +link-icons
+  @include link-icons;
   // Use this class if a link gets an icon when it shouldn't.
-  a.noicon
+  a.noicon {
-    +no-link-icon
+    @include no-link-icon; }
   // Not all links have a url structure that can be detected,
   // So you can set them explicitly yourself like so:
-  a#this-is-a-pdf-link
+  a#this-is-a-pdf-link {
-    +link-icon("pdf.png")
+    @include link-icon(unquote("pdf.png")); } }

examples/blueprint_plugins/src/print.sass

@@ -1,3 +0,0 @@
-@import blueprint.sass
-
-+blueprint-print

examples/blueprint_plugins/src/print.scss

@@ -0,0 +1,3 @@
+@import "blueprint";
+
+@include blueprint-print;

examples/blueprint_plugins/src/rtl_screen.sass

@@ -1,13 +0,0 @@
-@import blueprint.sass
-@import blueprint/fancy_type.sass
-@import blueprint/scaffolding.sass
-@import blueprint/rtl.sass
-@import compass/reset.sass
-
-
-+blueprint
-+rtl-typography
-+fancy-type
-// Remove the scaffolding when you're ready to start doing visual design.
-// Or leave it in if you're happy with how blueprint looks out-of-the-box
-+blueprint-scaffolding

examples/blueprint_plugins/src/rtl_screen.scss

@@ -0,0 +1,15 @@
+@import "blueprint";
+@import "blueprint/fancy-type";
+@import "blueprint/scaffolding";
+@import "blueprint/rtl";
+@import "compass/reset";
+
+@include blueprint;
+
+@include rtl-typography;
+
+@include fancy-type;
+
+// Remove the scaffolding when you're ready to start doing visual design.
+// Or leave it in if you're happy with how blueprint looks out-of-the-box
+@include blueprint-scaffolding;

examples/blueprint_plugins/src/screen.sass

@@ -1,11 +0,0 @@
-@import blueprint.sass
-@import blueprint/fancy_type.sass
-@import blueprint/scaffolding.sass
-@import compass/reset.sass
-
-
-+blueprint
-+fancy-type
-// Remove the scaffolding when you're ready to start doing visual design.
-// Or leave it in if you're happy with how blueprint looks out-of-the-box
-+blueprint-scaffolding

examples/blueprint_plugins/src/screen.scss

@@ -0,0 +1,12 @@
+@import "blueprint";
+@import "blueprint/fancy-type";
+@import "blueprint/scaffolding";
+@import "compass/reset";
+
+@include blueprint;
+
+@include fancy-type;
+
+// Remove the scaffolding when you're ready to start doing visual design.
+// Or leave it in if you're happy with how blueprint looks out-of-the-box
+@include blueprint-scaffolding;

examples/blueprint_scoped/src/ie.sass

@@ -1,4 +0,0 @@
-@import blueprint.sass
-
-body.bp
-  +blueprint-ie(true)

examples/blueprint_scoped/src/ie.scss

@@ -0,0 +1,4 @@
+@import "blueprint";
+
+body.bp {
+  @include blueprint-ie(true); }

examples/blueprint_scoped/src/print.sass

@@ -1,4 +0,0 @@
-@import blueprint.sass
-
-body.bp
-  +blueprint-print(true)

examples/blueprint_scoped/src/print.scss

@@ -0,0 +1,4 @@
+@import "blueprint";
+
+body.bp {
+  @include blueprint-print(true); }

examples/blueprint_scoped/src/screen.sass

@@ -1,5 +0,0 @@
-@import blueprint.sass
-@import compass/reset.sass
-
-body.bp
-  +blueprint(true)

examples/blueprint_scoped/src/screen.scss

@@ -0,0 +1,5 @@
+@import "blueprint";
+@import "compass/reset";
+
+body.bp {
+  @include blueprint(true); }

examples/blueprint_scoped_form/src/ie.sass

@@ -1,3 +0,0 @@
-@import blueprint.sass
-
-+blueprint-ie

examples/blueprint_scoped_form/src/ie.scss

@@ -0,0 +1,3 @@
+@import "blueprint";
+
+@include blueprint-ie;

examples/blueprint_scoped_form/src/print.sass

@@ -1,3 +0,0 @@
-@import blueprint.sass
-
-+blueprint-print

examples/blueprint_scoped_form/src/print.scss

@@ -0,0 +1,3 @@
+@import "blueprint";
+
+@include blueprint-print;

examples/blueprint_scoped_form/src/screen.sass

@@ -1,10 +0,0 @@
-@import blueprint.sass
-@import compass/reset.sass
-
-+blueprint-grid
-+blueprint-typography
-+blueprint-utilities
-+blueprint-debug
-+blueprint-interaction
-form.blueprint
-  +blueprint-form

examples/blueprint_scoped_form/src/screen.scss

@@ -0,0 +1,15 @@
+@import "blueprint";
+@import "compass/reset";
+
+@include blueprint-grid;
+
+@include blueprint-typography;
+
+@include blueprint-utilities;
+
+@include blueprint-debug;
+
+@include blueprint-interaction;
+
+form.blueprint {
+  @include blueprint-form; }

examples/blueprint_semantic/src/ie.sass

@@ -1,3 +0,0 @@
-@import blueprint.sass
-
-+blueprint-ie

examples/blueprint_semantic/src/ie.scss

@@ -0,0 +1,3 @@
+@import "blueprint";
+
+@include blueprint-ie;

examples/blueprint_semantic/src/liquid.sass

@@ -1,69 +0,0 @@
-@import blueprint.sass
-@import blueprint/fancy_type.sass
-@import blueprint/scaffolding.sass
-@import blueprint/liquid.sass
-@import compass/reset.sass
-
-.container
-  +container
-
-body.blueprint
-  +blueprint-typography(true)
-  +blueprint-scaffolding-body
-  hr
-    +colruler
-  hr.space
-    +colspacer
-  img#w3c
-    :margin-top 0
-    :padding-top 0
-
-body#index
-  #page-header
-    +span(6)
-  #files-header
-    +span(8)
-  #description-header
-    +span(10)
-  #info
-    +box
-    ul
-      :margin-bottom 0
-      :padding-bottom 0
-
-body#sample
-  +fancy-paragraphs
-  h2
-    +alt
-  #first-box
-    +column(7)
-    +colborder
-  #another-box
-    +column(8)
-    +colborder
-  #aligned-box
-    +column(7, true)
-  #main
-    +column(15)
-    +prepend(1)
-    +colborder
-    img#test
-      +pull(1)
-      :margin-top 0
-      :padding-top 0
-    em.caps
-      +reset-font
-      +caps
-    #nested-1
-      +column(7)
-      +colborder
-    #nested-2
-      +column(7, true)
-  #sidebar
-    +column(7, true)
-    h3
-      em
-        +reset-font
-        +alt
-  #parting-thought
-    +alt

examples/blueprint_semantic/src/liquid.scss

@@ -0,0 +1,69 @@
+@import "blueprint";
+@import "blueprint/fancy-type";
+@import "blueprint/scaffolding";
+@import "blueprint/liquid";
+@import "compass/reset";
+
+.container {
+  @include container; }
+
+body.blueprint {
+  @include blueprint-typography(true);
+  @include blueprint-scaffolding-body;
+  hr {
+    @include colruler; }
+  hr.space {
+    @include colspacer; }
+  img#w3c {
+    margin-top: 0;
+    padding-top: 0; } }
+
+body#index {
+  #page-header {
+    @include span(6); }
+  #files-header {
+    @include span(8); }
+  #description-header {
+    @include span(10); }
+  #info {
+    @include box;
+    ul {
+      margin-bottom: 0;
+      padding-bottom: 0; } } }
+
+body#sample {
+  @include fancy-paragraphs;
+  h2 {
+    @include alt; }
+  #first-box {
+    @include column(7);
+    @include colborder; }
+  #another-box {
+    @include column(8);
+    @include colborder; }
+  #aligned-box {
+    @include column(7, true); }
+  #main {
+    @include column(15);
+    @include prepend(1);
+    @include colborder;
+    img#test {
+      @include pull(1);
+      margin-top: 0;
+      padding-top: 0; }
+    em.caps {
+      @include reset-font;
+      @include caps; }
+    #nested-1 {
+      @include column(7);
+      @include colborder; }
+    #nested-2 {
+      @include column(7, true); } }
+  #sidebar {
+    @include column(7, true);
+    h3 {
+      em {
+        @include reset-font;
+        @include alt; } } }
+  #parting-thought {
+    @include alt; } }

examples/blueprint_semantic/src/print.sass

@@ -1,3 +0,0 @@
-@import blueprint.sass
-
-+blueprint-print

examples/blueprint_semantic/src/print.scss

@@ -0,0 +1,3 @@
+@import "blueprint";
+
+@include blueprint-print;

examples/blueprint_semantic/src/screen.sass

@@ -1,70 +0,0 @@
-@import blueprint.sass
-@import blueprint/fancy_type.sass
-@import blueprint/scaffolding.sass
-@import compass/reset.sass
-
-body.blueprint
-  +blueprint-typography(true)
-  +blueprint-scaffolding-body
-  .container
-    +container
-  .showgrid
-    :background= inline_image("grid.png")
-  hr
-    +colruler
-  hr.space
-    +colspacer
-
-  img#w3c
-    :margin-top 0
-    :padding-top 0
-
-body#index
-  #page-header
-    +span(6)
-  #files-header
-    +span(8)
-  #description-header
-    +span(10)
-  #info
-    +box
-    ul
-      :margin-bottom 0
-      :padding-bottom 0
-
-body#sample
-  +fancy-paragraphs
-  h2
-    +alt
-  #first-box
-    +column(7)
-    +colborder
-  #another-box
-    +column(8)
-    +colborder
-  #aligned-box
-    +column(7, true)
-  #main
-    +column(15)
-    +prepend(1)
-    +colborder
-    img#test
-      +pull(1)
-      :margin-top 0
-      :padding-top 0
-    em.caps
-      +reset-font
-      +caps
-    #nested-1
-      +column(7)
-      +colborder
-    #nested-2
-      +column(7, true)
-  #sidebar
-    +column(7, true)
-    h3
-      em
-        +reset-font
-        +alt
-  #parting-thought
-    +alt

examples/blueprint_semantic/src/screen.scss

@@ -0,0 +1,69 @@
+@import "blueprint";
+@import "blueprint/fancy-type";
+@import "blueprint/scaffolding";
+@import "compass/reset";
+
+body.blueprint {
+  @include blueprint-typography(true);
+  @include blueprint-scaffolding-body;
+  .container {
+    @include container; }
+  .showgrid {
+    background: inline_image(unquote("grid.png")); }
+  hr {
+    @include colruler; }
+  hr.space {
+    @include colspacer; }
+  img#w3c {
+    margin-top: 0;
+    padding-top: 0; } }
+
+body#index {
+  #page-header {
+    @include span(6); }
+  #files-header {
+    @include span(8); }
+  #description-header {
+    @include span(10); }
+  #info {
+    @include box;
+    ul {
+      margin-bottom: 0;
+      padding-bottom: 0; } } }
+
+body#sample {
+  @include fancy-paragraphs;
+  h2 {
+    @include alt; }
+  #first-box {
+    @include column(7);
+    @include colborder; }
+  #another-box {
+    @include column(8);
+    @include colborder; }
+  #aligned-box {
+    @include column(7, true); }
+  #main {
+    @include column(15);
+    @include prepend(1);
+    @include colborder;
+    img#test {
+      @include pull(1);
+      margin-top: 0;
+      padding-top: 0; }
+    em.caps {
+      @include reset-font;
+      @include caps; }
+    #nested-1 {
+      @include column(7);
+      @include colborder; }
+    #nested-2 {
+      @include column(7, true); } }
+  #sidebar {
+    @include column(7, true);
+    h3 {
+      em {
+        @include reset-font;
+        @include alt; } } }
+  #parting-thought {
+    @include alt; } }

examples/compass/src/compass.sass

@@ -1,47 +0,0 @@
-=compass(!s)
-  :position relative
-  :width= 4 * !s
-  :height= 4 * !s
-  :font-size 24px
-  :font-family "Academy Engraved LET", "Papyrus"
-  .n, .s, .e, .w
-    :position absolute
-    :width= !s
-    :height= !s
-    :text-align center
-    :vertical-align middle
-  .w
-    :left 0px
-  .n.w, .s.w
-    :left= 0.5 * !s
-  .n, .s
-    :left=  1.5 * !s
-  .n.e, .s.e
-    :left= 2.5 * !s
-  .e
-    :left= 3 * !s
-  .n
-    :top 0px
-  .n.w, .n.e
-    :top= 0.5 * !s
-  .w, .e
-    :top= 1.5 * !s
-  .s.w, .s.e
-    :top= 2.5 * !s
-  .s
-    :top= 3 * !s
-
-.compass
-  :margin 1em auto
-  +compass(4em)
-  .n, .s, .e, .w
-    p
-      :margin
-        :top 1.5em
-        :bottom 1.5em
-  .n.w, .s.w, .n.e, .s.e
-    p
-      :margin
-        :top 1em
-        :bottom 1em
-  

examples/compass/src/compass.scss

@@ -0,0 +1,46 @@
+@mixin compass($s) {
+  position: relative;
+  width: 4 * $s;
+  height: 4 * $s;
+  font-size: 24px;
+  font-family: "Academy Engraved LET", "Papyrus";
+  .n, .s, .e, .w {
+    position: absolute;
+    width: $s;
+    height: $s;
+    text-align: center;
+    vertical-align: middle; }
+  .w {
+    left: 0px; }
+  .n.w, .s.w {
+    left: 0.5 * $s; }
+  .n, .s {
+    left: 1.5 * $s; }
+  .n.e, .s.e {
+    left: 2.5 * $s; }
+  .e {
+    left: 3 * $s; }
+  .n {
+    top: 0px; }
+  .n.w, .n.e {
+    top: 0.5 * $s; }
+  .w, .e {
+    top: 1.5 * $s; }
+  .s.w, .s.e {
+    top: 2.5 * $s; }
+  .s {
+    top: 3 * $s; } }
+
+.compass {
+  margin: 1em auto;
+  @include compass(4em);
+  .n, .s, .e, .w {
+    p {
+      margin: {
+        top: 1.5em;
+        bottom: 1.5em; }; } }
+  .n.w, .s.w, .n.e, .s.e {
+    p {
+      margin: {
+        top: 1em;
+        bottom: 1em; }; } } }

examples/compass/src/sticky_footer.sass

@@ -1,11 +0,0 @@
-@import compass/reset.sass
-@import compass/layout.sass
-
-+sticky-footer(72px, "#layout", "#layout_footer", "#footer")
-
-#header
-  :background #999
-  :height 72px
-
-#footer
-  :background #ccc

examples/compass/src/sticky_footer.scss

@@ -0,0 +1,11 @@
+@import "compass/reset";
+@import "compass/layout";
+
+@include sticky-footer(72px, unquote("#layout"), unquote("#layout_footer"), unquote("#footer"));
+
+#header {
+  background: #999999;
+  height: 72px; }
+
+#footer {
+  background: #cccccc; }

examples/compass/src/utilities.sass

@@ -1,108 +0,0 @@
-@import compass/reset.sass
-@import compass/utilities.sass
-@import yui/modules/base.sass
-@import blueprint/grid.sass
-@import blueprint/scaffolding.sass
-@import compass/utilities/text/ellipsis.sass
-
-html
-  +yui-base
-
-h2
-  :margin-top 0
-  :border-bottom 2px solid #777
-
-#utilities
-  +container
-
-.example
-  :border 2px solid #ccc
-  :padding 4px
-
-#links
-  +column(8)
-
-  .hover a
-    +hover-link
-  .colored a
-    +link-colors(#C00, #C0C, #700, #707, #777)
-  .unstyled
-    :color #333
-    a
-      +unstyled-link
-.mixin
-  :font-family monospace
-  :border
-    :width 1px
-    :style solid
-  :border-color #ccc
-  :border-color -moz-use-text-color
-  :padding 2px
-  :line-height 22px
-  :white-space nowrap
-
-#tag-cloud
-  +column(8)
-  ol
-    :margin 0
-    +inline-list
-    +tag-cloud(1em)
-    li
-      +no-bullets
-
-#lists
-  +column(8, true)
-  ul.inline
-    +inline-list
-  ul.comma-delimited
-    +comma-delimited-list
-  ol.pretty
-    +pretty-bullets("blue_arrow.gif", 5px, 7px, 18px)
-
-#tables
-  +column(16)
-  table.alternating
-    :width 100%
-    +alternating-rows-and-columns(#F9E5A7,#CEFBB3,#222)
-    +table-scaffolding
-    +outer-table-borders(2px, #151A99)
-    +inner-table-borders(1px, #151A99)
-
-#ellipsis
-  +column(8, true)
-  td
-    width: 50%
-    +ellipsis
-
-#floats
-  +column(16)
-  .clearfix-example
-    :background #ddd
-    :border 2px solid black
-    :text-align center
-    +clearfix
-  .float-left-example, .float-right-example
-    :border 1px solid black
-    :padding 10px
-    :margin 0 20px
-    :width 25%
-    :background #F9E5A7
-  .float-left-example
-    +float-left
-  .float-right-example
-    +float-right
-  .pie-clearfix-example
-    :background #ddd
-    :border 2px solid black
-    :text-align center
-    :position relative
-    +pie-clearfix
-    .positioned-example
-      :display block
-      :position absolute
-      :left -10px
-      :top -10px
-      :font-size 10px
-      :width 10em
-      :background #ccf
-      :border 1px solid black

examples/compass/src/utilities.scss

@@ -0,0 +1,108 @@
+@import "compass/reset";
+@import "compass/utilities";
+@import "yui/modules/base";
+@import "blueprint/grid";
+@import "blueprint/scaffolding";
+@import "compass/utilities/text/ellipsis";
+
+html {
+  @include yui-base; }
+
+h2 {
+  margin-top: 0;
+  border-bottom: 2px solid #777777; }
+
+#utilities {
+  @include container; }
+
+.example {
+  border: 2px solid #cccccc;
+  padding: 4px; }
+
+#links {
+  @include column(8);
+  .hover a {
+    @include hover-link; }
+  .colored a {
+    @include link-colors(#cc0000, #cc00cc, #770000, #770077, #777777); }
+  .unstyled {
+    color: #333333;
+    a {
+      @include unstyled-link; } } }
+
+.mixin {
+  font-family: monospace;
+  border: {
+    width: 1px;
+    style: solid; };
+  border-color: #cccccc;
+  border-color: -moz-use-text-color;
+  padding: 2px;
+  line-height: 22px;
+  white-space: nowrap; }
+
+#tag-cloud {
+  @include column(8);
+  ol {
+    margin: 0;
+    @include inline-list;
+    @include tag-cloud(1em);
+    li {
+      @include no-bullets; } } }
+
+#lists {
+  @include column(8, true);
+  ul.inline {
+    @include inline-list; }
+  ul.comma-delimited {
+    @include comma-delimited-list; }
+  ol.pretty {
+    @include pretty-bullets(unquote("blue_arrow.gif"), 5px, 7px, 18px); } }
+
+#tables {
+  @include column(16);
+  table.alternating {
+    width: 100%;
+    @include alternating-rows-and-columns(#f9e5a7, #cefbb3, #222222);
+    @include table-scaffolding;
+    @include outer-table-borders(2px, #151a99);
+    @include inner-table-borders(1px, #151a99); } }
+
+#ellipsis {
+  @include column(8, true);
+  td {
+    width: 50%;
+    @include ellipsis; } }
+
+#floats {
+  @include column(16);
+  .clearfix-example {
+    background: #dddddd;
+    border: 2px solid black;
+    text-align: center;
+    @include clearfix; }
+  .float-left-example, .float-right-example {
+    border: 1px solid black;
+    padding: 10px;
+    margin: 0 20px;
+    width: 25%;
+    background: #f9e5a7; }
+  .float-left-example {
+    @include float-left; }
+  .float-right-example {
+    @include float-right; }
+  .pie-clearfix-example {
+    background: #dddddd;
+    border: 2px solid black;
+    text-align: center;
+    position: relative;
+    @include pie-clearfix;
+    .positioned-example {
+      display: block;
+      position: absolute;
+      left: -10px;
+      top: -10px;
+      font-size: 10px;
+      width: 10em;
+      background: #ccccff;
+      border: 1px solid black; } } }

examples/css3/src/_base.sass

@@ -1,14 +0,0 @@
-@import compass/utilities.sass
-@import compass/css3.sass
-
-=container
-  +clearfix
-  overflow: auto
-
-=row
-  +clearfix
-
-=column
-  float: left
-  +box-sizing("border-box")
-

examples/css3/src/_base.scss

@@ -0,0 +1,13 @@
+@import "compass/utilities";
+@import "compass/css3";
+
+@mixin container {
+  @include clearfix;
+  overflow: auto; }
+
+@mixin row {
+  @include clearfix; }
+
+@mixin column {
+  float: left;
+  @include box-sizing(border-box); }

examples/css3/src/fancy-fonts.sass

@@ -1,7 +0,0 @@
-@import compass/css3.sass
-
-+font-face("Angelina", font_files("angelina.ttf", "truetype"))
-h1
-  font-family: "Angelina"
-  font-size: 5em
-

examples/css3/src/fancy-fonts.scss

@@ -0,0 +1,7 @@
+@import "compass/css3";
+
+@include font-face(Angelina, font_files(unquote("angelina.ttf"), truetype));
+
+h1 {
+  font-family: "Angelina";
+  font-size: 5em; }

examples/css3/src/gradients.sass

@@ -1,69 +0,0 @@
-@import compass/css3.sass
-
-#gradient
-  width: 200px
-  height: 100px
-  border: 1px solid #777
-
-thead th
-  min-height: 50px
-  min-width: 100px
-  +text-shadow(#fff)
-th.linear
-  +linear-gradient(color_stops(#fff, #f00 50%, #ff0 75%, #0f0))
-th.radial
-  +radial-gradient(color_stops(#fff, #f00 20px, #ff0 30px, #0f0 40px))
-tr.default
-  td.linear
-    +linear-gradient(color_stops(#c00, #00c))
-  td.radial
-    +radial-gradient(color_stops(#c00, #00c))
-  td.linear-code:before
-    content: "+linear-gradient(color_stops(#c00, #00c))"
-  td.radial-code:before
-    content: "+radial-gradient(color_stops(#c00, #00c))"
-tr.top-left
-  td.linear
-    +linear-gradient(color_stops(#c00, #00c), "top left")
-  td.radial
-    +radial-gradient(color_stops(#c00, #00c), "top left")
-  td.linear-code:before
-    content: "+linear-gradient(color_stops(#c00, #00c), \"top left\")"
-  td.radial-code:before
-    content: "+radial-gradient(color_stops(#c00, #00c), \"top left\")"
-tr.bottom-right
-  td.linear
-    +linear-gradient(color_stops(#c00, #00c), "bottom right")
-  td.radial
-    +radial-gradient(color_stops(#c00, #00c), "bottom right")
-  td.linear-code:before
-    content: "+linear-gradient(color_stops(#c00, #00c), \"bottom right\")"
-  td.radial-code:before
-    content: "+radial-gradient(color_stops(#c00, #00c), \"bottom right\")"
-tr.three-color
-  td.linear
-    +linear-gradient(color_stops(#c00, #fff, #00c))
-  td.radial
-    +radial-gradient(color_stops(#c00, #fff, #00c 50px))
-  td.linear-code:before
-    content: "+linear-gradient(color_stops(#c00, #fff, #00c))"
-  td.radial-code:before
-    content: "+radial-gradient(color_stops(#c00, #fff, #00c 50px))"
-tr.four-color
-  td.linear
-    +linear-gradient(color_stops(#c00, #0c0 25%, #0cc 75%, #00c))
-  td.radial
-    +radial-gradient(color_stops(#c00, #0c0 25%, #0cc 75%, #00c 50px))
-  td.linear-code:before
-    content: "+linear-gradient(color_stops(#c00, #0c0 25%, #0cc 75%, #00c))"
-  td.radial-code:before
-    content: "+radial-gradient(color_stops(#c00, #0c0 25%, #0cc 75%, #00c 50px))"
-tr.filled-in
-  td.linear
-    +linear-gradient(color_stops(#c00 33%, #00c 66%))
-  td.radial
-    +radial-gradient(color_stops(#c00 25px, #00c 75px))
-  td.linear-code:before
-    content: "+linear-gradient(color_stops(#c00 33%, #00c 66%))"
-  td.radial-code:before
-    content: "+radial-gradient(color_stops(#c00 25px, #00c 75px))"

examples/css3/src/gradients.scss

@@ -0,0 +1,77 @@
+@import "compass/css3";
+
+#gradient {
+  width: 200px;
+  height: 100px;
+  border: 1px solid #777777; }
+
+thead th {
+  min-height: 50px;
+  min-width: 100px;
+  @include text-shadow(white); }
+
+th.linear {
+  @include linear-gradient(color_stops(white, red 50%, yellow 75%, lime)); }
+
+th.radial {
+  @include radial-gradient(color_stops(white, red 20px, yellow 30px, lime 40px)); }
+
+tr.default {
+  td.linear {
+    @include linear-gradient(color_stops(#cc0000, #0000cc)); }
+  td.radial {
+    @include radial-gradient(color_stops(#cc0000, #0000cc)); }
+  td.linear-code:before {
+    content: "+linear-gradient(color_stops(#c00, #00c))"; }
+  td.radial-code:before {
+    content: "+radial-gradient(color_stops(#c00, #00c))"; } }
+
+tr.top-left {
+  td.linear {
+    @include linear-gradient(color_stops(#cc0000, #0000cc), unquote("top left")); }
+  td.radial {
+    @include radial-gradient(color_stops(#cc0000, #0000cc), unquote("top left")); }
+  td.linear-code:before {
+    content: '+linear-gradient(color_stops(#c00, #00c), "top left")'; }
+  td.radial-code:before {
+    content: '+radial-gradient(color_stops(#c00, #00c), "top left")'; } }
+
+tr.bottom-right {
+  td.linear {
+    @include linear-gradient(color_stops(#cc0000, #0000cc), unquote("bottom right")); }
+  td.radial {
+    @include radial-gradient(color_stops(#cc0000, #0000cc), unquote("bottom right")); }
+  td.linear-code:before {
+    content: '+linear-gradient(color_stops(#c00, #00c), "bottom right")'; }
+  td.radial-code:before {
+    content: '+radial-gradient(color_stops(#c00, #00c), "bottom right")'; } }
+
+tr.three-color {
+  td.linear {
+    @include linear-gradient(color_stops(#cc0000, white, #0000cc)); }
+  td.radial {
+    @include radial-gradient(color_stops(#cc0000, white, #0000cc 50px)); }
+  td.linear-code:before {
+    content: "+linear-gradient(color_stops(#c00, #fff, #00c))"; }
+  td.radial-code:before {
+    content: "+radial-gradient(color_stops(#c00, #fff, #00c 50px))"; } }
+
+tr.four-color {
+  td.linear {
+    @include linear-gradient(color_stops(#cc0000, #00cc00 25%, #00cccc 75%, #0000cc)); }
+  td.radial {
+    @include radial-gradient(color_stops(#cc0000, #00cc00 25%, #00cccc 75%, #0000cc 50px)); }
+  td.linear-code:before {
+    content: "+linear-gradient(color_stops(#c00, #0c0 25%, #0cc 75%, #00c))"; }
+  td.radial-code:before {
+    content: "+radial-gradient(color_stops(#c00, #0c0 25%, #0cc 75%, #00c 50px))"; } }
+
+tr.filled-in {
+  td.linear {
+    @include linear-gradient(color_stops(#cc0000 33%, #0000cc 66%)); }
+  td.radial {
+    @include radial-gradient(color_stops(#cc0000 25px, #0000cc 75px)); }
+  td.linear-code:before {
+    content: "+linear-gradient(color_stops(#c00 33%, #00c 66%))"; }
+  td.radial-code:before {
+    content: "+radial-gradient(color_stops(#c00 25px, #00c 75px))"; } }

examples/css3/src/main.sass

@@ -1,108 +0,0 @@
-@import blueprint/reset.sass
-@import base.sass
-
-!border_color = #aaa
-
-#container
-  +container
-
-!min_width = 340px
-.examples
-  margin-bottom: 1em
-  +row
-  min-width= !min_width * 3 + 20px * 2 + 20px
-
-h1
-  text-align: center
-
-.example, .gutter
-  min-height: 21em
-
-.example
-  +column
-  width: 30%
-  min-width= !min_width
-  border: 4px solid #{!border_color}
-  +border-radius(0.667em)
-  +box-shadow(darken(!border_color, 40), 5px, 5px, 2px)
-  margin-bottom: 1em
-  h2
-    font-family: Angelina
-    margin: 0.5em 0 1em
-    text-align: center
-
-.gutter
-  display: block
-  float: left
-  width: 2.5%
-  min-width: 20px
-  content: " "
-
-.example
-  +linear-gradient(color_stops(#fff, #ccc))
-  pre
-    padding: 1em
-    margin: 1em
-    color: white
-    text-shadow: 1px 1px 2px #000
-    font-weight: bold
-#background-clip
-  pre
-    background: transparent #{image_url("fresh-peas.jpg")} no-repeat
-    border: 1em solid rgba(255,0,0,.25)
-  .padding-box
-    +background-clip("padding-box")
-    +background-origin("padding-box")
-  .border-box
-    +background-clip("border-box")
-    +background-origin("border-box")
-
-#background-size
-  pre
-    background: transparent #{image_url("fresh-peas.jpg")} no-repeat
-    border: 1em solid #{mix(red, white, .5)}
-    border: 1em solid rgba(255,0,0,.25)
-  .top-left
-    +background-size(50% 50%)
-  .centered
-    +background-size(50% 50%)
-    background-position: center center
-
-#gradients
-  .horizontal
-    +linear-gradient(color_stops(#d92626, #2626d9), "left")
-  .vertical
-    +linear-gradient(color_stops(#d92626, #2626d9))
-  .diagonal
-    +linear-gradient(color_stops(#d92626, #2626d9), "right top")
-  .radial
-    /* +radial-gradient(color_stops(#d92626 0, #2626d9 1))
-    +radial-gradient(color_stops(#d92626 10px, #2626d9 150px))
-    // +radial-gradient("center center, 10, center center, 100", #d92626, #2626d9)
-    // background-image: -moz-radial-gradient(20px center, circle, #d92626 10px, #2626d9 100px)
-    // background-color: #2626d9
-  .radial-1
-    // A default radial gradient:
-    /* +radial-gradient(color_stops(#ddd, #aaa))
-    +radial-gradient(color_stops(#ddd, #aaa))
-  .radial-2
-    // A centered gradient
-    /* +radial-gradient(color_stops(#ddd, #aaa))
-    +radial-gradient(color_stops(#ddd, #aaa))
-  .radial-3
-    // A centered radial gradient at the top
-    /* +radial-gradient(color_stops(#ddd, #aaa), "top center")
-    +radial-gradient(color_stops(#ddd, #aaa), "top center")
-  .radial-4
-    // A centered radial gradient with fixed color stops
-    /* +radial-gradient(color_stops(#ddd 20px, #aaa 50px))
-    +radial-gradient(color_stops(#ddd 20px, #aaa 50px))
-  .radial-5
-    // A centered gradient with several color stops
-    /* +radial-gradient(color_stops(#ddd 20%, #aaa 50%, #c00))
-    +radial-gradient(color_stops(#ddd 20px, #aaa 50%, #c00 200px))
-  .radial-6
-    // A centered gradient with color stops
-    /* +radial-gradient(color_stops(#0c0, #ddd 20%, #aaa 50%, #00c))
-    +radial-gradient(color_stops(#0c0 0px, #ddd 20px, #aaa 50px, #00c 100px))
-

examples/css3/src/main.scss

@@ -0,0 +1,110 @@
+@import "blueprint/reset";
+@import "base";
+
+$border_color: #aaaaaa;
+
+#container {
+  @include container; }
+
+$min_width: 340px;
+
+.examples {
+  margin-bottom: 1em;
+  @include row;
+  min-width: $min_width * 3 + 20px * 2 + 20px; }
+
+h1 {
+  text-align: center; }
+
+.example, .gutter {
+  min-height: 21em; }
+
+.example {
+  @include column;
+  width: 30%;
+  min-width: $min_width;
+  border: 4px solid #{$border_color};
+  @include border-radius(0.667em);
+  @include box-shadow(darken($border_color, 40), 5px, 5px, 2px);
+  margin-bottom: 1em;
+  h2 {
+    font-family: Angelina;
+    margin: 0.5em 0 1em;
+    text-align: center; } }
+
+.gutter {
+  display: block;
+  float: left;
+  width: 2.5%;
+  min-width: 20px;
+  content: " "; }
+
+.example {
+  @include linear-gradient(color_stops(white, #cccccc));
+  pre {
+    padding: 1em;
+    margin: 1em;
+    color: white;
+    text-shadow: 1px 1px 2px black;
+    font-weight: bold; } }
+
+#background-clip {
+  pre {
+    background: transparent #{image_url("fresh-peas.jpg")} no-repeat;
+    border: 1em solid rgba(255, 0, 0, 0.25); }
+  .padding-box {
+    @include background-clip(padding-box);
+    @include background-origin(padding-box); }
+  .border-box {
+    @include background-clip(border-box);
+    @include background-origin(border-box); } }
+
+#background-size {
+  pre {
+    background: transparent #{image_url("fresh-peas.jpg")} no-repeat;
+    border: 1em solid #{mix(red, white, 0.5)};
+    border: 1em solid rgba(255, 0, 0, 0.25); }
+  .top-left {
+    @include background-size(50% 50%); }
+  .centered {
+    @include background-size(50% 50%);
+    background-position: center center; } }
+
+#gradients {
+  .horizontal {
+    @include linear-gradient(color_stops(#d92626, #2626d9), left); }
+  .vertical {
+    @include linear-gradient(color_stops(#d92626, #2626d9)); }
+  .diagonal {
+    @include linear-gradient(color_stops(#d92626, #2626d9), unquote("right top")); }
+  .radial {
+    /* +radial-gradient(color_stops(#d92626 0, #2626d9 1)) */
+    @include radial-gradient(color_stops(#d92626 10px, #2626d9 150px));
+    // +radial-gradient("center center, 10, center center, 100", #d92626, #2626d9)
+    // background-image: -moz-radial-gradient(20px center, circle, #d92626 10px, #2626d9 100px)
+    // background-color: #2626d9
+  }
+  .radial-1 {
+    // A default radial gradient:
+    /* +radial-gradient(color_stops(#ddd, #aaa)) */
+    @include radial-gradient(color_stops(#dddddd, #aaaaaa)); }
+  .radial-2 {
+    // A centered gradient
+    /* +radial-gradient(color_stops(#ddd, #aaa)) */
+    @include radial-gradient(color_stops(#dddddd, #aaaaaa)); }
+  .radial-3 {
+    // A centered radial gradient at the top
+    /* +radial-gradient(color_stops(#ddd, #aaa), "top center") */
+    @include radial-gradient(color_stops(#dddddd, #aaaaaa), unquote("top center")); }
+  .radial-4 {
+    // A centered radial gradient with fixed color stops
+    /* +radial-gradient(color_stops(#ddd 20px, #aaa 50px)) */
+    @include radial-gradient(color_stops(#dddddd 20px, #aaaaaa 50px)); }
+  .radial-5 {
+    // A centered gradient with several color stops
+    /* +radial-gradient(color_stops(#ddd 20%, #aaa 50%, #c00)) */
+    @include radial-gradient(color_stops(#dddddd 20px, #aaaaaa 50%, #cc0000 200px)); }
+  .radial-6 {
+    // A centered gradient with color stops
+    /* +radial-gradient(color_stops(#0c0, #ddd 20%, #aaa 50%, #00c)) */
+    @include radial-gradient(color_stops(#00cc00 0px, #dddddd 20px, #aaaaaa 50px, #0000cc 100px)); } }

examples/logo/src/ie.sass

@@ -1,6 +0,0 @@
-/*
-  Welcome to Compass. Use this file to write IE specific override styles.
-  Import this file using the following HTML or equivalent:
-  <!--[if IE]>
-    <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
-  <![endif]-->

examples/logo/src/ie.scss

@@ -0,0 +1,5 @@
+/* Welcome to Compass. Use this file to write IE specific override styles.
+ * Import this file using the following HTML or equivalent:
+ * <!--[if IE]>
+ *   <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
+ * <![endif]--> */

examples/logo/src/print.sass

@@ -1,6 +0,0 @@
-/*
-  Welcome to Compass. Use this file to define print styles.
-  Import this file using the following HTML or equivalent:
-  <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />
-  
-

examples/logo/src/print.scss

@@ -0,0 +1,3 @@
+/* Welcome to Compass. Use this file to define print styles.
+ * Import this file using the following HTML or equivalent:
+ * <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" /> */

examples/logo/src/screen.sass

@@ -1,29 +0,0 @@
-/*
-  Welcome to Compass.
-  In this file you should write your main styles. (or centralize your imports)
-  Import this file using the following HTML or equivalent:
-  <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
-
-@import compass/reset.sass
-@import compass/misc.sass
-
-#logo-large,
-#logo-medium,
-#logo,
-#logo-small
-  :text-align center
-  :margin
-    :bottom 40px
-
-#logo-large
-  +unobtrusive-logo(3em)
-  :margin-top 20px
-
-#logo-medium
-  +unobtrusive-logo(2em)
-
-#logo
-  +unobtrusive-logo
-
-#logo-small
-  +unobtrusive-logo(0.5em)

examples/logo/src/screen.scss

@@ -0,0 +1,28 @@
+/* Welcome to Compass.
+ * In this file you should write your main styles. (or centralize your imports)
+ * Import this file using the following HTML or equivalent:
+ * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
+
+@import "compass/reset";
+@import "compass/misc";
+
+#logo-large,
+#logo-medium,
+#logo,
+#logo-small {
+  text-align: center;
+  margin: {
+    bottom: 40px; }; }
+
+#logo-large {
+  @include unobtrusive-logo(3em);
+  margin-top: 20px; }
+
+#logo-medium {
+  @include unobtrusive-logo(2em); }
+
+#logo {
+  @include unobtrusive-logo; }
+
+#logo-small {
+  @include unobtrusive-logo(0.5em); }

examples/ninesixty/config.rb

@@ -7,3 +7,4 @@ images_dir = "images"
 output_style = :compact
 # To enable relative paths to assets via compass helper functions. Uncomment:
 # relative_assets = true
+sass_options = {:quiet => true}

examples/ninesixty/src/grid.sass

@@ -1,16 +0,0 @@
-/*
-  960 Grid System ~ Core CSS.
-  Learn more ~ http://960.gs/
-  
-  Licensed under GPL and MIT.
-
-@import compass/utilities/general/reset.sass
-@import 960/grid.sass
-
-+global-reset
-
-.container_12
-  +grid-system(12)
-
-.container_16
-  +grid-system(16)

examples/ninesixty/src/grid.scss

@@ -0,0 +1,15 @@
+/* 960 Grid System ~ Core CSS.
+ * Learn more ~ http://960.gs/
+ *
+ * Licensed under GPL and MIT. */
+
+@import "compass/utilities/general/reset";
+@import "960/grid";
+
+@include global-reset;
+
+.container_12 {
+  @include grid-system(12); }
+
+.container_16 {
+  @include grid-system(16); }

examples/ninesixty/src/text.sass

@@ -1,10 +0,0 @@
-/*
-  960 Grid System ~ Text CSS.
-  Learn more ~ http://960.gs/
-  
-  Licensed under GPL and MIT.
-  
-
-@import 960/text.sass
-
-+text

examples/ninesixty/src/text.scss

@@ -0,0 +1,8 @@
+/* 960 Grid System ~ Text CSS.
+ * Learn more ~ http://960.gs/
+ *
+ * Licensed under GPL and MIT. */
+
+@import "960/text";
+
+@include text;

examples/susy/config.rb

@@ -7,3 +7,4 @@ images_dir = "images"
 output_style = :compact
 # To enable relative paths to assets via compass helper functions. Uncomment:
 # relative_assets = true
+sass_options = {:quiet => true}

examples/susy/src/_base.scss

@@ -7,19 +7,21 @@
 // GRID
 // Set these values as needed for your grid layout.
 //  - defaults are shown.
-!grid_unit = "em"
+$grid_unit: em;
-!total_cols = 12
-!col_width = 4
-!gutter_width = 1
-!side_gutter_width = !gutter_width
 
+$total_cols: 12;
+
+$col_width: 4;
+
+$gutter_width: 1;
+
+$side_gutter_width: $gutter_width;
 
 // OMEGA_FLOAT
 // By default, +omega elements are floated right.
 // You can override that globally here:
 // !omega_float = "right"
 
-
 // HACKS
 // Are you using hacks or conditional comments? Susy makes both possible.
 // Leave this as 'true' to use hacks, set it as false for conditional comments.
@@ -27,36 +29,33 @@
 // several other mixins.
 // !hacks = true
 
-
 // FONT-SIZE
 // Override these values as needed (defaults are shown)
 //  - You set the font and line heights in pixels.
 //  - Susy will do the math and give you !base_font_size and !base_line_height
 //    variables, set flexibly against the common browser default of 16px
-!base_font_size_px = 16
+$base_font_size_px: 16;
-!base_line_height_px = 24
 
+$base_line_height_px: 24;
 
 // SUSY
 // Don't move this @import above the GRID and FONT-SIZE overrides.
-@import susy/susy.sass
+@import "susy/susy";
-
 
 // COLORS
 // Set any colors you will need later.
-!main = #194C66
+$main: #194c66;
-!alt = #CC6633
 
+$alt: #cc6633;
 
 // FONTS
 // Give yourself some font stacks to work with.
-=sans-family
+@mixin sans-family {
-  font-family: Helvetica, Arial, sans-serif
+  font-family: Helvetica, Arial, sans-serif; }
-
-=serif-family
-  font-family: Baskerville, Palatino, serif
 
+@mixin serif-family {
+  font-family: Baskerville, Palatino, serif; }
 
 // OTHER MIXINS
 // Mixins set here will be available in defaults, screen, print and IE
-// Or anywhere you import either base.sass or defaults.sass
+// Or anywhere you import either base or defaults

examples/susy/src/_defaults.sass

@@ -1,148 +0,0 @@
-//** DEFAULT STYLES **//
-// Don't forget to set your default styles.
-
-
-// Get all the details and mixins from base.sass
-@import base.sass
-// Reset browser defaults, and prepare block-level HTML5 elements
-@import susy/reset.sass
-@import compass/css3.sass
-
-
-/* @group defaults */
-
-body
-  +sans-family
-  color= !main
-
-/* @group links */
-
-\:focus
-  outline= 1px "dotted" !alt
-
-a
-  &:link, &:visited
-    color= !alt
-  &:focus, &:hover, &:active
-    color= !alt - #222
-    text-decoration: none
-
-/* @end */
-
-
-/* @group headers */
-
-h1, h2, h3, h4, h5, h6
-  font-weight: bold
-
-/* @end */
-
-
-/* @group forms */
-
-form *:focus
-  outline: none
-
-fieldset
-  margin= !base_line_height 0
-
-legend
-  font-weight: bold
-  font-variant: small-caps
-
-label
-  display: block
-  margin-top= !base_line_height
-
-legend + label
-  margin-top: 0
-
-textarea, input[type="text"]
-  +box-sizing("border-box")
-  width: 100%
-
-/* @end */
-
-
-/* @group tables */
-
-/* tables still need 'cellspacing="0"' in the markup */
-
-table
-  :width 100%
-  :border= 1/16 + "em solid" !main + #333
-    :left none
-    :right none
-  :padding= 7/16 + "em 0"
-  :margin= 8/16 + "em 0"
-
-th
-  :font-weight bold
-
-/* @end */
-
-
-/* @group block tags */
-
-p
-  :margin= !base_line_height 0
-
-=list-default(!ol = false)
-  :margin= !base_line_height
-  @if !ol
-    :list-style decimal
-  @else
-    :list-style disc
-
-=no-style-list
-  +no-bullets
-  :margin 0
-  :padding 0
-
-ol
-  +list-default("ol")
-
-ul
-  +list-default
-
-blockquote
-  :margin= !base_line_height
-  +serif-family
-
-/* @end */
-
-
-/* @group inline tags */
-
-cite
-  :font-style italic
-
-em
-  :font-style italic
-
-strong
-  :font-weight bold
-
-ins
-  :text-decoration underline
-
-del
-  :text-decoration line-through
-
-q
-  :font-style italic
-  em
-    :font-style normal
-
-/* @end */
-
-
-/* @group replaced tags */
-
-img
-  :vertical-align bottom
-
-/* @end */
-
-
-/* @end */

examples/susy/src/_defaults.scss

@@ -0,0 +1,140 @@
+//** DEFAULT STYLES **//
+// Don't forget to set your default styles.
+
+// Get all the details and mixins from base
+@import "base";
+
+// Reset browser defaults, and prepare block-level HTML5 elements
+@import "susy/reset";
+@import "compass/css3";
+
+/* @group defaults */
+
+body {
+  @include sans-family;
+  color: $main; }
+
+/* @group links */
+
+:focus {
+  outline: 1px dotted $alt; }
+
+a {
+  &:link, &:visited {
+    color: $alt; }
+  &:focus, &:hover, &:active {
+    color: $alt - #222222;
+    text-decoration: none; } }
+
+/* @end */
+
+/* @group headers */
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: bold; }
+
+/* @end */
+
+/* @group forms */
+
+form *:focus {
+  outline: none; }
+
+fieldset {
+  margin: $base_line_height 0; }
+
+legend {
+  font-weight: bold;
+  font-variant: small-caps; }
+
+label {
+  display: block;
+  margin-top: $base_line_height; }
+
+legend + label {
+  margin-top: 0; }
+
+textarea, input[type="text"] {
+  @include box-sizing(border-box);
+  width: 100%; }
+
+/* @end */
+
+/* @group tables */
+
+/* tables still need 'cellspacing="0"' in the markup */
+
+table {
+  width: 100%;
+  border: 1 / 16 + unquote("em solid") $main + #333333 {
+    left: none;
+    right: none; };
+  padding: 7 / 16 + unquote("em 0");
+  margin: 8 / 16 + unquote("em 0"); }
+
+th {
+  font-weight: bold; }
+
+/* @end */
+
+/* @group block tags */
+
+p {
+  margin: $base_line_height 0; }
+
+@mixin list-default($ol: false) {
+  margin: $base_line_height;
+  @if $ol {
+    list-style: decimal; }
+  @else {
+    list-style: disc; } }
+
+@mixin no-style-list {
+  @include no-bullets;
+  margin: 0;
+  padding: 0; }
+
+ol {
+  @include list-default(ol); }
+
+ul {
+  @include list-default; }
+
+blockquote {
+  margin: $base_line_height;
+  @include serif-family; }
+
+/* @end */
+
+/* @group inline tags */
+
+cite {
+  font-style: italic; }
+
+em {
+  font-style: italic; }
+
+strong {
+  font-weight: bold; }
+
+ins {
+  text-decoration: underline; }
+
+del {
+  text-decoration: line-through; }
+
+q {
+  font-style: italic;
+  em {
+    font-style: normal; } }
+
+/* @end */
+
+/* @group replaced tags */
+
+img {
+  vertical-align: bottom; }
+
+/* @end */
+
+/* @end */

examples/susy/src/screen.sass

@@ -1,114 +0,0 @@
-/*
-  Welcome to Susy. Use this file to define screen styles.
-  Import this file using the following HTML or equivalent:
-  <link href="/stylesheets/screen.css" media="screen" rel="stylesheet" type="text/css" />
-
-
-@import defaults.sass
-
-
-/* @group STRUCTURE */
-
-#skip-links
-  ul
-    +no-style-list
-  a
-    +skip-link
-    width: 100%
-
-body
-  +susy
-
-#page
-  position: relative
-  +container
-  background: rgba(0,0,0,.10)
-
-h1, h2
-  +serif-family
-  text-transform: uppercase
-  text-align: center
-  background: rgba(0,0,0,.15)
-  letter-spacing= 1/14 + "em"
-
-h1 + p, h2 + p, p:first-child
-  margin-top: 0
-
-header[role="banner"], #site-nav
-  +full
-  h1
-    font-size: 1.5em
-    line-height: 2em
-
-#site-nav
-  text-align: center
-  padding: 1.5em
-  ul
-    +inline-block-list(.5em)
-
-#content
-  > aside
-    +columns(2)
-    &:first-child
-      +alpha
-    & + aside
-      +omega
-  section[role="main"]
-    +columns(6)
-    > section
-      +full(6)
-    .major
-      article
-        +columns(3,6)
-        & + article
-          +omega(6)
-    .minor
-      aside
-        +columns(2,6)
-      article
-        +columns(4,6)
-        +omega(6)
-        header, .body
-          +columns(2,4)
-        .body
-          +omega(4)
-        footer
-          +full(4)
-    
-footer[role="contentinfo"]
-  +full
-  border-top= 1/14 + "em dotted"
-  padding-top= 13/14 + "em"
-
-
-/* @end */
-
-  
-/* @group COMPONENTS by type */
-
-
-
-/* @end */
-
-
-/* @group OVERRIDES by content */
-
-
-
-/* @end */
-
-        
-/* @group OVERRIDES by page */
-
-
-
-/* @end */
-
-
-/* @group DEBUG */
-
-// Uncomment, adjust and use for debugging
-// #page
-//   +show-grid("your-grid-image.png")
-
-/* @end */

examples/susy/src/screen.scss

@@ -0,0 +1,100 @@
+/* Welcome to Susy. Use this file to define screen styles.
+ * Import this file using the following HTML or equivalent:
+ * <link href="/stylesheets/screen.css" media="screen" rel="stylesheet" type="text/css" /> */
+
+@import "defaults";
+
+/* @group STRUCTURE */
+
+#skip-links {
+  ul {
+    @include no-style-list; }
+  a {
+    @include skip-link;
+    width: 100%; } }
+
+body {
+  @include susy; }
+
+#page {
+  position: relative;
+  @include container;
+  background: rgba(0, 0, 0, 0.1); }
+
+h1, h2 {
+  @include serif-family;
+  text-transform: uppercase;
+  text-align: center;
+  background: rgba(0, 0, 0, 0.15);
+  letter-spacing: 1 / 14 + em; }
+
+h1 + p, h2 + p, p:first-child {
+  margin-top: 0; }
+
+header[role="banner"], #site-nav {
+  @include full;
+  h1 {
+    font-size: 1.5em;
+    line-height: 2em; } }
+
+#site-nav {
+  text-align: center;
+  padding: 1.5em;
+  ul {
+    @include inline-block-list(0.5em); } }
+
+#content {
+  > aside {
+    @include columns(2);
+    &:first-child {
+      @include alpha; }
+    & + aside {
+      @include omega; } }
+  section[role="main"] {
+    @include columns(6);
+    > section {
+      @include full(6); }
+    .major {
+      article {
+        @include columns(3, 6);
+        & + article {
+          @include omega(6); } } }
+    .minor {
+      aside {
+        @include columns(2, 6); }
+      article {
+        @include columns(4, 6);
+        @include omega(6);
+        header, .body {
+          @include columns(2, 4); }
+        .body {
+          @include omega(4); }
+        footer {
+          @include full(4); } } } } }
+
+footer[role="contentinfo"] {
+  @include full;
+  border-top: 1 / 14 + unquote("em dotted");
+  padding-top: 13 / 14 + em; }
+
+/* @end */
+
+/* @group COMPONENTS by type */
+
+/* @end */
+
+/* @group OVERRIDES by content */
+
+/* @end */
+
+/* @group OVERRIDES by page */
+
+/* @end */
+
+/* @group DEBUG */
+
+// Uncomment, adjust and use for debugging
+// #page
+//   +show-grid("your-grid-image.png")
+
+/* @end */

examples/yui/config.rb

@@ -0,0 +1 @@
+sass_options = {:quiet => true}

examples/yui/src/screen.sass

@@ -1,13 +0,0 @@
-@import yui.sass
-@import compass/reset.sass
-
-+yui
-
-.bigger
-  +font-size(16px)
-
-.biggest
-  +font-size(18px)
-
-.bigger .biggest
-  +font-size(18px, 16px)

examples/yui/src/screen.scss

@@ -0,0 +1,13 @@
+@import "yui";
+@import "compass/reset";
+
+@include yui;
+
+.bigger {
+  @include font-size(16px); }
+
+.biggest {
+  @include font-size(18px); }
+
+.bigger .biggest {
+  @include font-size(18px, 16px); }