Sass Color Palette Generator

Inspired by EngineYard's Front-End Maintainability with Sass and Style Guides article about how helpful it is to keep track of your Sass color variables in one place I sought to automate the process a little bit. There are a bunch of ways that this could be done, but I took a really simple client-side approach. Just make sure your _scss file is publicly accessible and this code should generate an always-up-to-date style guide from your Sass (scss) color file. What do you think?

	var $colors = $("#colors");
	var url = "/css/sass/_colors.scss";
	$.get(url, function(data) {
	var lines = data.split("\n");
	var line = "";
	var parts = [];
	for (var i = 0; i < lines.length; i++) {
	line = lines[i].trim();
	if (!line.match(/^\$/)) continue;
	parts = line.split(/\:\s+/);
	if (parts[1].match(/^#/) || parts[1].match(/^rgba?/)) {
	addColor(parts[0], parts[1])
	}
	}
	}, "text");
	function addColor(name, color) {
	var $li = $("<li>", {style: "background: " + color, text: name + " " + color.slice(0, -1)});
	$colors.append($li);
	}

view raw SassColorPalette.js hosted with ❤ by GitHub