Skip to content

Instantly share code, notes, and snippets.

@madx
Created April 8, 2014 08:54
Show Gist options
  • Save madx/10102719 to your computer and use it in GitHub Desktop.
Save madx/10102719 to your computer and use it in GitHub Desktop.
Hipster CSS Preprocessor
$ cpp -P input.css
#define TEXT_COLOR black
#define BG_COLOR white
#define BOX_SIZING(args) -webkit-box-sizing: args;\
-moz-box-sizing: args;\
box-sizing: args
body {
color: TEXT_COLOR;
background: BG_COLOR;
}
div {
BOX_SIZING(border-box);
}
body {
color: black;
background: white;
}
div {
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
@wyderkat
Copy link

wyderkat commented Apr 8, 2014

just cpp. amazing! what exactly -P does? I cannot understand that awesome documentation (man cpp)

@Bounga
Copy link

Bounga commented Apr 10, 2014

@madx Really great stuff!

@wyderkat -P is only here to prevent linemarkers to be generated by CPP at the beginning of the output file since we don't need / want it.

If you remove the -P option you'll end-up with something like:

#1 "input.css"
#1 "<built-in>" 1
#1 "<built-in>" 3
#169 "<built-in>" 3
#1 "<command line>" 1
#1 "<built-in>" 2
#1 "input.css" 2

body {
  color: black;
  background: white;
}

div {
  -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment