Reuse of the color-yiq function
Created by: envolute
With a simple change it is possible to use the color-yiq function with other properties, not just "color"
// Color contrast
@mixin color-yiq($color, $prop: 'color') {
$r: red($color);
$g: green($color);
$b: blue($color);
$yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
@if ($yiq >= 150) {
#{$prop}: #111;
} @else {
#{$prop}: #fff;
}
}
.element-inside-primary {
@include color-yiq(theme-color("primary"), 'background-color');
}
Just add the parameter "$prop: 'color'" that we can use other properties This can be interesting when you want to assign a background that contrasts with a color.