ccss

by aeosynth

aeosynth /ccss

CoffeeScript CSS

129 Stars 8 Forks Last release: Not found MIT License 50 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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: opaque

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;
}
#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.

Related

CoffeeKup - CoffeeScript to HTML

ckup - Coco to both HTML and CSS

CoffeeStylesheets - Another CoffeeScript to CSS approach

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.