One-line CSS pre-processor àla LESS / SCSS / SASS

styles.css.in

/*
 * Run this through the C/C++ preprocessor like this:
 *
 *   cpp -nostdinc -w -P input.css.in | sed 'y/$/#/' > output.css
 *
 * Note that the C/C++ preprocessor always interprets octothorpe characters
 * at beggining of lines as preprocessor directives. Use sollar signs instead
 * to avoid the trouble. Dollar signs are changed into octothorpes using
 * "sed" after passing the source through the preprocessor.
 *
 * If you use Make to build your stuffs, a rule like this will take care
 * of pre-processing your CSS files:
 *
 * %.css: %.css.in
 *   cpp -nostdinc -w -P $< | sed 'y/$$/#/' > $@
 *
 * Enjoy! ☺
 */

/* Define some variables */
#define COLOR1 $212121
#define COLOR2 $FF2121

/* A macros to handle vendor prefixes */
#define _ADD_VENDOR_PREFIXES(_name, _content) \
  -webkit-_name: _content; \
  -moz-_name: _content; \
  -ms-_name: _content; \
  -o-_name: _content; \
  _name: _content

/* Shorthands for attributes which may need the vendor prefixes */
#define transition(_x) _ADD_VENDOR_PREFIXES(transition, _x)
#define transform(_x) _ADD_VENDOR_PREFIXES(transform, _x)

/* Some rules to style a <div> changing on mouseover */
$hoverme {
  width: 300px;
  height: 300px;
  background-color: COLOR1;
  transition(5s linear);
}

$hoverme:hover {
  border-radius: 150px;
  transform(rotate(90deg));
}