JavaScript: Fontello Demo File SASS icon generator

js-sass-fontello-icon.js

// source: http://codepen.io/troutacular/pen/LafsD
// include in your file http://web-app.usc.edu/fontello/fontello-variable-generator.js

( function() {
	// set the main element to attach the output
	var cont = document.querySelector('.footer');
	// get all elements with class .the-icons
	var el = document.querySelectorAll('.the-icons');
	// loop through the all el returned
	for (var i = 0, len = el.length; i < len; i++) {
		// get the class name of the icon to set as the variable name
		var iName = el[i].querySelector('.i-name').innerHTML;
		// get the font text code to set as the variable value
		var iCode = el[i].querySelector('.i-code').innerHTML;
			iCode = iCode.replace('0xe', '\\e');
		// build the sass variable
		var compassVar = '$';
			compassVar += iName;
			compassVar += ': \'';
			compassVar += iCode;
			compassVar += '\';';
		// create a block element to contain each separate value
		var e = document.createElement('div');
		// add sass variable to the block element
		e.innerHTML += compassVar;
		// attach the block element with string to the main element
		cont.appendChild(e);
	}
})();