Extending

You may create your own CSS properties by using the plugins feature.

api.plugin("hoverEffect", function(api, color) {
	return {
		":hover": {
			color: color,
            background: api.lighten(color, 60)
		}
	}
})
api.add({
	a: {
		color: "#000",
		hoverEffect: "#999"
	}
});

You could create your own API methods.

api.register("buttonize", function(selector) {
	var styles = {};
	styles[selector] = {
		cursor: "pointer",
		display: "block",
		background: "#aaa",
		":hover": {
			background: "#ddd"
		}
	};
	api.add(styles);
});
api.buttonize(".header a");
The code above produces:
.header a {
  cursor: pointer;
  display: block;
  background: #aaa;
}
.header a:hover {
  background: #ddd;
}

Every API method could be overwritten. You are able to run your own function instead of the original one. If your method returns true then the default behaviour of the method is suppressed and only your implementation works.

api.hook("add", function(rules) {	
	if(rules.grid) {
		var styles = {};
		styles[rules.grid.parent] = parentStyles = {
			":after": {
				display: "table",
				content: "",
				clear: "both"
			}
		};
		parentStyles[rules.grid.child] = {
			width: (100 / rules.grid.columns) + "%",
			float: "left"
		};
		api.add(styles);
		return true;
	}
});
api.add({
	grid: {
		parent: ".header .menu",
		child: ".link",
		columns: 4
	}
});

And the result is:

.header .menu:after {
  display: table;
  content: "";
  clear: both;
}
.header .menu .link {
  width: 25%;
  float: left;
}