LESS: Proper Syntax for CSS3 "Saturate" Filter

less-saturate-fix.md

What You Think Would Work

You'd think that the way LESS works, you could just make your own .saturate() function to handle all of your various vendor-specific CSS rules, like so:

.saturate(@pct) {
	filter: saturate(@pct);
	-webkit-filter: saturate(@pct);
	-moz-filter: saturate(@pct);
	-o-filter: saturate(@pct);
	-ms-filter: saturate(@pct);
}

Unfortunately, this will give you a compiler error: Expected color in function 'saturate'. LESS has it's own saturate() function, which takes in a root color and a percentage as parameters and returns a new, more saturated color based on your root color. This would be useful for creating dynamic color schemes (see spin(), desaturate(), mix(), etc), but that's not what we're wanting to do here at all.

What Actually Works

.saturate(@pct) {
	filter: ~"saturate(@{pct})";
	-webkit-filter: ~"saturate(@{pct})";
	-moz-filter: ~"saturate(@{pct})";
	-o-filter: ~"saturate(@{pct})";
	-ms-filter: ~"saturate(@{pct})";
}

A little bit more markup than you're used to using in your LESS functions, I'm sure. The ~ operator tells LESS to interpret the quotes after it as a string, and the brackets (in @{pct}) are telling LESS to interpret that bit of the string as your @pct parameter.

You also might run into similar conflicts with LESS's contrast() function, but the same method should work for that. :)