Solution Online

Create your CSS styles in CoffeeScript for Meteor

I've created my first Meteor package today: CSSC. This package eases the creation of CSS stylesheets in CoffeeScript.

For using it, adds the package into your Meteor's project:

meteor add pierreeric:cssc

Once done, just create your stylesheets using DOM and CSSOM notation. For instance, I will create 2 classes selected and unselected:

if Meteor.isClient
  Meteor.startup ->
    css = new CSSC

    css.add '.selected',
      margin: CSSC.x 3
      border: "3px solid #{CSSC.yellow}"
      borderRadius: CSSC.x 5
    css.add '.unselected',
      color: CSSC.yellow

As you can see it, the syntax is close to what you would use in Stylus or SASS (when using .sass notation).

I've also created 2 plugins for this package:

• CSSC-Colors which allows inclusion of a nicer set of colors

• CSSC-Famous which avoids you from including CSS files from Famo.us.