SVG Filler Mixin with Hover Effect. Very simple, but handy if you are using SVG's for icons and want a uniform scheme to each. Decided to go with RGBA after all, but will work on this later.

svg_colorizer_hsl.scss

@mixin svg_colorize($hue, $saturation, $lightness) {
	
	fill: hsl($hue, $saturation, $lightness - 20);
	
	&:hover {
		fill: hsl($hue, $saturation, $lightness);
	}
	
}

/****************
 * Usage Example*
 ***************/
 // I have a inline svg within an anchor tag, with class name in svg path element
 
<li>
	<a href="mailto:[email protected]" class="mail">
		<svg version="1.1" width="32" height="32" viewBox="0 0 32 32">
			<path d="M16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zM8 8h16c0.286 0 0.563 0.061 0.817 0.177l-8.817 10.286-8.817-10.287c0.254-0.116 0.531-0.177 0.817-0.177zM6 22v-12c0-0.042 0.002-0.084 0.004-0.125l5.864 6.842-5.8 5.8c-0.045-0.167-0.069-0.34-0.069-0.517zM24 24h-16c-0.177 0-0.35-0.024-0.517-0.069l5.691-5.691 2.826 3.297 2.826-3.297 5.691 5.691c-0.167 0.045-0.34 0.069-0.517 0.069zM26 22c0 0.177-0.024 0.35-0.069 0.517l-5.8-5.8 5.865-6.842c0.003 0.041 0.004 0.083 0.004 0.125v12z" fill="#222222" class="svg_mail" />
		</svg>
	</a>
</li>

.svg_mail {
	@include svg_colorize(255, 99, 50);
}