Skip to content

Instantly share code, notes, and snippets.

@nerdyman
Created June 1, 2016 13:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nerdyman/d43e1cded702e12dc4752b3679e0c309 to your computer and use it in GitHub Desktop.
Save nerdyman/d43e1cded702e12dc4752b3679e0c309 to your computer and use it in GitHub Desktop.
LESS contrast mixin - contrast mixin for LESS which works likes you'd expect it to
/**
* contrast.less
* the built-in contrast() function in LESS sucks, this one works
* calculates the perceptual brightness of a color and assigns an int value to it
* to determine whether contrasting color should be dark or light
*
* usage:
* #contrast(@color: #f00; @threshold: 43; @dark: #222; @light: #eee; @more: '!important');
*
* using specific params:
* #contrast(@threshold: 20; @light: #ccc);
*
* @NOTE this script assumes you have variables called:
* - @color-black
* - @color-white
*/
#contrast(@color, @property: color, @threshold: 50, @dark: @color-black, @light: @color-white-pure, @more: ~'') {
@contrast: unit(luma(@color));
& when (@contrast > @threshold) {
@{property}: @dark@more;
}
& when not (@contrast > @threshold) {
@{property}: @light@more;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment