scss sass功能设置基于背景的对比字体颜色

Posted 2021-05-18

.default {
  background-color: #0000FF;
  color: #FFF;
}
.custom {
  background-color: #0000FF;
  color: #FACE0F;
}

// contrasting font color
@function set-font-color($color, $dark: #000, $light: #FFF) {
  // return $dark or $light color depending on lightness of $color
  @return if(lightness($color) > 50, $dark, $light); 
  
}

$color: #0000FF;

.default {
  background-color: $color;
  color: set-font-color($color);
}
.custom {
  background-color: $color;
  color: set-font-color($color, #BADA55, #FACE0F);
}