Some Examples how to use the WP Customizer FrontEnd CSS Class https://gist.github.com/konradsroka/6325980

wp_customizer_frontend_css_examples.php

<?php

// Some Examples 
// The following examples show how you can use the CC_Customizer class to generate the CSS for the frontend.  

// First create a new Customizer_Frontend_CSS object.
$cc_customizer = new Customizer_Frontend_CSS();

// Now we can start defining the styles we need for the frontend, 
// based on the saved option values in the WP Customizer. 

// Example #1
// Define the CSS for ONE option 
// For example if '#000000' was saved, the output would be: p { color: #000000; } 
$cc_customizer->add_style( 'p', Array(
	Array(
		'option'	=> 'text_color',
		'style'		=> 'color'
	))
);

// Example #2 - With Custom String	
// Define the CSS for ONE option, but with a CUSTOM STRING around the option value 	
$cc_customizer->add_style( 'h1', Array(
	Array(
		'option'	=> 'h1_font_size',
		'style'		=> 'font-size',
		'value'		=> '$em'	
	))
);
// The output would be: h1 { font-size: $em; margin: 10px; overflow: 10px; } 
// ** while '$' will be auto-replaced with the value saved in WP Customizer  


// Example #3 - With Static Styles
// Define the CSS for ONE option, but with a CUSTOM STRING around the option value 	
$cc_customizer->add_style('h1',Array(
	Array(
		'option'	=> 'h1_font_size',
		'style'		=> 'font-size',
		'value'		=> '$em',	
	),
	Array(
		'static'	=> 'margin: 10px;
						overflow: 10px;'
	))
);
// The output would be: h1 { font-size: $em; margin: 10px; overflow: 10px; } 
// ** while '$' will be auto-replaced with the value saved in WP Customizer  

// Example #4 - With Multiple Options	
$cc_customizer->add_style('h1',Array(
	Array(
		'option'	=> 'h1_font_size',
		'style'		=> 'font-size',
		'value'		=> '$em'	
	),
	Array(
		'option'	=> 'h1_font_family',
		'style'		=> 'font-family'
	))
);
// The output would be: h1 { font-size: $em; font-family: $; }
// ** while '$' would be replaced with the values of course


// Example #5 - With Multiple Options AND static styles	  	
$cc_customizer->add_style('h1',Array(
	Array(
		'option'	=> 'h1_font_size',
		'style'		=> 'font-size',
		'value'		=> '$em',	
	),
	Array(
		'option'	=> 'h1_font_family',
		'style'		=> 'font-family'
	),
	Array(
		'static'	=> 'margin: 10px;
						overflow: 10px;'
	))
);


// Don't forget to output all your CSS!
// When finished, just hook it all to wp_head
add_action( 'wp_head', $cc_customizer->output_css() ); 


// That's it! 

// Use this class for all styles that need to have the values of the WP Customizer. 
// But keep all your static-only CSS in a normal CSS file. 

?>