Skip to content

Instantly share code, notes, and snippets.

@trent-boyd
Created December 9, 2012 21:15
Show Gist options
  • Save trent-boyd/4247045 to your computer and use it in GitHub Desktop.
Save trent-boyd/4247045 to your computer and use it in GitHub Desktop.
LESS: Proper Syntax for CSS3 "Saturate" Filter

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. :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment