CoffeeScript CSS
despite the name, CoffeeScript is not required; it just makes writing objects (as well as everything else) easier. You could create a JSON string in another language, parse it in node, and render it with ccss.
install: npm install ccss
main.coffee:
ccss = require 'ccss'
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'
mixins: borderRadius '5px'
'#id .className': do ->
opaque = 1
translucent = opaque / 2
img:
mixins: [
borderRadius '5px'
boxShadow '5px'
]
opacity: translucent
'img:hover':
opacity: opaquemain.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;
}
#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.
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.
CoffeeKup - CoffeeScript to HTML
ckup - Coco to both HTML and CSS
CoffeeStylesheets - Another CoffeeScript to CSS approach