Contrast-color function

This codeblock creates a function called button-text that make use of the built-in function contrast-color in Compass. The function takes in 4 arguments in this order: Color, dark color, light color, threshold %.
So depending on what color gets written and the threshold, it will either be the dark or the light one that returns..

@function button-text($bg){
  @return contrast-color($bg, #333, #eee, 50%);
}
  .btn-a{
	background: #222
    color: button-text(#222); // #eee
}
.btn-b{
	background: #aaa;
  	color:button-text(#aaa);   //#333
}

Add your comment