update readme

readme.md

@@ -1,62 +1,68 @@
 CoffeeScript CSS
 
+main.coffee:
     ccss = require 'ccss'
 
-    rules =
-      '.foo': do ->
+    template = require './template.coffee'
+    css = ccss.compile template
+    require('fs').writeFileSync 'main.css', css
+
+    #or all at once: ccss.compileFile './template.coffee', 'main.css'
+
+template.coffee:
+    borderRadius = (str) ->
+      WebkitBorderRadius: str
+      MozBorderRadius:    str
+      borderRadius:       str
+
+    boxShadow = (str) ->
+      WebkitBoxShadow: str
+      MozBoxShadow:    str
+      boxShadow:       str
+
+    module.exports =
+      form:
+        input:
+          padding: '5px'
+          border: '1px solid'
+          mixin: borderRadius '5px'
+      '#id .className': do ->
         opaque = 1
         translucent = opaque / 2
         img:
+          mixin: [
+            borderRadius '5px'
+            boxShadow '5px'
+          ]
           opacity: translucent
         'img:hover':
           opacity: opaque
 
-    css = ccss.compile rules
-
-    console.log css
-
-    ### output:
-    .foo img {
+main.css:
+    form input {
+      padding: 5px;
+      border: 1px solid;
+      -webkit-border-radius: 5px;
+      -moz-border-radius: 5px;
+      border-radius: 5px;
+    }
+    #id .className img {
       opacity: 0.5;
+      -webkit-border-radius: 5px;
+      -moz-border-radius: 5px;
+      border-radius: 5px;
+      -webkit-box-shadow: 5px;
+      -moz-box-shadow: 5px;
+      box-shadow: 5px;
     }
-    .foo img:hover {
+    #id .className img:hover {
       opacity: 1;
     }
-    ###
 
 the core of the compiler is simply this:
 
 iterate over the key / values of an object; if the value is another object,
 append the key to the current selector, and recurse; else generate css.
 
-if you want logic, wrap it up in a function which returns an object.
-
-keys that would confuse the real compiler, coffee-script, must be quoted.
-
 to reduce the amount of quoting, if a css property has a capital letter C,
 it will be transformed into -c; selectors are not touched.
-
-eg, instead of
-
-    borderRadius = (arg) ->
-      '-webkit-border-radius': arg
-      '-moz-border-radius':    arg
-      'border-radius':         arg
-
-we can write
-
-    borderRadius = (arg) ->
-      WebkitBorderRadius: arg
-      MozBorderRadius:    arg
-      borderRadius:       arg
-
-    '#id .className':
-      borderRadius 5
-
-compiled:
-
-    #id .className {
-      -webkit-border-radius: 5;
-      -moz-border-radius: 5;
-      border-radius: 5;
-    }