diff --git a/readme.md b/readme.md index 0a35e92..f1ed717 100644 --- a/readme.md +++ b/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; - }