Generate CSS style rules within Javascript.
require('csster.js'); // however you manage dependencies
Csster.style({
h1: {
fontSize: 18,
color: 'red'
}
});
...
Result, inserted in DOM automatically at the bottom of the <head> element:
...
<style type="text/stylesheet">
h1 {
font-size: 18px;
color: red;
}
</style>
</head>
...
The style method accepts CSS rules passed either as arrays or hashes, arrays just being a way to order the hashes. For example:
{
ul: {
margin: 5;
padding: 0;
}
'ul li:first': {
paddingLeft: 20px;
}
}
Note that
- property names are automatically converted to the correct format from camelcase. Feel free to quote them as well.
- raw numbers are assumed to be "pixels" (or "px"), and rendered as such.
- any sort of selectors are allowed... they are just passed through to the stylesheet.
Csster supports nesting of rules to keep things more concise:
{
ul: {
margin: 5;
li: {
paddingLeft: 20;
}
}
}
The "li" property in this case might be a selector or might be a property name. A list of valid property names is used to identify properties right now, and otherwise it's considered a sub-selector. (Think about this.)
Use Javascript to write necessary functions. function/color.js contains SASS-like functions: darken, lighten, etc.
It's all Javascript, so macros and more complex functions are easy to write. To mix in a set of values, create a function that returns a hash of values, for example:
function roundedCorners(radius) {
return {
'-webkit-border-radius': radius,
'-moz-border-radius': radius,
'border-radius': radius
}
}
To "mix these in", use the "macro" key:
{
'div#featured_box': {
backgroundColor: '#394c89';
macro: roundedCorner(5);
}
}
- Support "has"
- Support more than one Macro
- Some color math
- Fix license
- Better name
This project comes from my frustration of trying to build standalone Javascript widgets. Web projects always involve the combination of HTML DOM, CSS and Javascript. It's often simpler to generate the necessary DOM within your Javascript, removing any coupling (and a simpler calling convention) to a specific web page. But most widgets have certain style rules. To avoid any coupling with the CSS at all, styles can be included inline, but these gets bulky and hard to read. The "rule" nature of CSS is nice. So widgets then have a Javascript and CSS component. Wouldn't it be nice, though, to remove that CSS component.
With the advent of SASS, the coupling is even more complicated, as now there's some other tool completely unrelated to your component, written in some other language. Wouldn't a unified approach be nice?
Copyright (c) 2010 Andrew J. Peterson All Rights Reserved.