This Meteor package provides an easy way to create your stylesheets in CoffeeScript: CSSC
Find some additional information on my blog:
meteor add pierreeric:cssc
The following example creates a new stylesheet with 3 rules: one on the HTML
file and a second on a CSS class .bubble
and a third for multiple CSSRules:
mainCss = new CSSC
mainCss
.add 'html',
backgroundColor: 'red'
.add '.bubble',
backgroundColor: '#FFDC00'
borderRadius: CSSC.em 0.75
.add ['h1', 'h2'],
backgroundColor: 'blue'
CSS properties are declared as a dictionary of keys and values respecting the DOM and CCOM API when called in Javascript.
They allow working with numerical value instead of strings.
CSSC.px {Number}
:CSSC.px 12
# Returns: '12px'
CSSC.pc {Number}
:CSSC.pc 50
# Returns: '50%'
CSSC.em {Number}
:CSSC.em 1.2
# Returns: '1.2em'
You can add additional plugins to this package enhancing its capabilities.
Available options are:
Colors: meteor add pierreeric:cssc-colors
: It imports colors
and provides some nice API for color manipulations:
CSSC.red
# Returns: '#FF4136'
# Create a color from an hex String and add alpha blending
c = new CSSC.Clr ['#FF4136', 0.3]
# Add 20% luminance
c.set 'l', (Math.round 1.2 * c.get 'l')
# Get an RGBA string
c.rgba()
Famo.us: meteor add pierreeric:cssc-famous
: It imports as CSSC file, all required CSS styles for Famo.us. It removes unnecessary calls to CSS files and the
necessity to put the following in your project:
require('famous.core.famous');
Normalize: meteor add pierreeric:cssc-normalize
: It imports as CSSC file all normalized styles just like normalize.css.