underscore.css : converts an object to CSS declarations

underscore.css.coffee

# Usage: _.toCSS(object) 
# Returns properly formatted CSS.
# Object cannot be deeply nested as this is a simple object/CSS mapping and it reads better.
# If you want to do something dynamic to generate the CSS, do it in a JS function that returns the object.  
#
_css = 
  toCSS: (obj) ->
    propToCSS = (key, value) ->
    css = ''      
    for selector of obj
      declarations = ""
      declaration = obj[selector]
      for property of declaration
        value = declaration[property]
        value = value + "px" if _.isNumber(value)
        declarations +=  "#{property}: #{value};\n"
      css += "#{selector} {\n#{declarations}}\n\n"
    return css
  
# Export this little puppy
root = this
if not window? and module?
  module.exports = _css
else if root._?
  root._.mixin(_css)
else
  root._ = _css

usage.coffee

# You can use this anywhere but when combined with CoffeeKup templates it makes for clean html, css, and logic all in one easy to edit place
# This is just one way to add the style using jQuery to append it the head (see append below)
# A production Cake task that:
#     iterates through the view directory, 
#     instantiates the Backbone views, 
#     collects all the styles into one file, 
#     organizes and comments them by view,
#     minifies them etc.., 
# could be written easily as well.
FS.Views.Footer = Backbone.View.extend  
  html: ->
    div id: 'footer', class: 'primary_gradient', ->
      div id: 'left', ->
        span id: 'sync', rel: 'Synchronize'
        span id: 'syncing'

  style: ->
    '#footer':
      'background-color': '#EBEBEB'
      'background': 'url(/images/bottombar.png) repeat-x'
      position: 'fixed'
      bottom: 0
      height: 24
      left: 0
      width: '100%'
    '#left': 
      float: 'left'
    '#sync': 
      background: 'url(/images/sync_green.png)'
      position: 'fixed'
      left: 9
      bottom: 6
      width: 22
      cursor: 'pointer'
    '.syncing': '-webkit-transform': 'rotate(1704deg)'
    
  template: (context) ->
    FS.Views.Footer.template = FS.Views.Footer.template ? CoffeeKup.compile @html
    return FS.Views.Footer.template(context)
    
  render: ->
    @el = $(@template())
    if not FS.Views.Footer.styleAdded
      $("<style type='text/css'>#{_.toCSS(@style)}</style>").appendTo("head") 
      FS.Views.Footer.styleAdded = true
    return this